0
Im Arbeiten an einem Projekt, und ich habe zu einem Teil, wo Im soll die Lücke zwischen den Blöcken zu 3px reduzieren. Ich habe mein Bestes die letzten 2 Tage versucht, aber ich kann nicht die gewünschte Anzeige erhalten. Dies ist ein Screen-Capture vonReduzieren Sie die Lücke zwischen zwei Blöcken in CSS
was getan haben: Screen Capture of the page
Im nicht in der Lage Schnipsel zu laufen, wenn ich meine Codes in diesem Beitrag einfügen, damit ich nur den benötigten Code geben Sie mir Ihre Hilfe.
(function($) {
\t var \t aux \t \t = {
\t \t \t // navigates left/right
\t \t \t navigate \t : function(dir, $el, $wrapper, opts, cache) {
\t \t \t \t
\t \t \t \t var scroll \t \t = opts.scroll,
\t \t \t \t \t factor \t \t = 1,
\t \t \t \t \t idxClicked \t = 0;
\t \t \t \t \t
\t \t \t \t if(cache.expanded) {
\t \t \t \t \t scroll \t \t = 1; // scroll is always 1 in full mode
\t \t \t \t \t factor \t \t = 3; // the width of the expanded item will be 3 times bigger than 1 collapsed item \t
\t \t \t \t \t idxClicked \t = cache.idxClicked; // the index of the clicked item
\t \t \t \t }
\t \t \t \t
\t \t \t \t // clone the elements on the right/left and append/prepend them according to dir and scroll
\t \t \t \t if(dir === 1) {
\t \t \t \t \t $wrapper.find('div.ca-item:lt(' + scroll + ')').each(function(i) {
\t \t \t \t \t \t $(this).clone(true).css('left', (cache.totalItems - idxClicked + i) * cache.itemW * factor + 'px').appendTo($wrapper);
\t \t \t \t \t });
\t \t \t \t }
\t \t \t \t else {
\t \t \t \t \t var $first \t = $wrapper.children().eq(0);
\t \t \t \t \t
\t \t \t \t \t $wrapper.find('div.ca-item:gt(' + (cache.totalItems - 1 - scroll) + ')').each(function(i) {
\t \t \t \t \t \t // insert before $first so they stay in the right order
\t \t \t \t \t \t $(this).clone(true).css('left', - (scroll - i + idxClicked) * cache.itemW * factor + 'px').insertBefore($first);
\t \t \t \t \t });
\t \t \t \t }
\t \t \t \t
\t \t \t \t // animate the left of each item
\t \t \t \t // the calculations are dependent on dir and on the cache.expanded value
\t \t \t \t $wrapper.find('div.ca-item').each(function(i) {
\t \t \t \t \t var $item \t = $(this);
\t \t \t \t \t $item.stop().animate({
\t \t \t \t \t \t left \t : (dir === 1) ? '-=' + (cache.itemW * factor * scroll) + 'px' : '+=' + (cache.itemW * factor * scroll) + 'px'
\t \t \t \t \t }, opts.sliderSpeed, opts.sliderEasing, function() {
\t \t \t \t \t \t if((dir === 1 && $item.position().left < - idxClicked * cache.itemW * factor) || (dir === -1 && $item.position().left > ((cache.totalItems - 1 - idxClicked) * cache.itemW * factor))) {
\t \t \t \t \t \t \t // remove the item that was cloned
\t \t \t \t \t \t \t $item.remove();
\t \t \t \t \t \t } \t \t \t \t \t \t
\t \t \t \t \t \t cache.isAnimating \t = false;
\t \t \t \t \t });
\t \t \t \t });
\t \t \t \t
\t \t \t },
\t \t \t // opens an item (animation) -> opens all the others
\t \t \t openItem \t : function($wrapper, $item, opts, cache) {
\t \t \t \t cache.idxClicked \t = $item.index();
\t \t \t \t // the item's position (1, 2, or 3) on the viewport (the visible items)
\t \t \t \t cache.winpos \t \t = aux.getWinPos($item.position().left, cache);
\t \t \t \t $wrapper.find('div.ca-item').not($item).hide();
\t \t \t \t $item.find('div.ca-content-wrapper').css('left', cache.itemW + 'px').stop().animate({
\t \t \t \t \t width \t : cache.itemW * 2 + 'px',
\t \t \t \t \t left \t : cache.itemW + 'px'
\t \t \t \t }, opts.itemSpeed, opts.itemEasing)
\t \t \t \t .end()
\t \t \t \t .stop()
\t \t \t \t .animate({
\t \t \t \t \t left \t : '0px'
\t \t \t \t }, opts.itemSpeed, opts.itemEasing, function() {
\t \t \t \t \t cache.isAnimating \t = false;
\t \t \t \t \t cache.expanded \t \t = true;
\t \t \t \t \t
\t \t \t \t \t aux.openItems($wrapper, $item, opts, cache);
\t \t \t \t });
\t \t \t \t \t \t
\t \t \t },
\t \t \t // opens all the items
\t \t \t openItems \t : function($wrapper, $openedItem, opts, cache) {
\t \t \t \t var openedIdx \t = $openedItem.index();
\t \t \t \t
\t \t \t \t $wrapper.find('div.ca-item').each(function(i) {
\t \t \t \t \t var $item \t = $(this),
\t \t \t \t \t \t idx \t \t = $item.index();
\t \t \t \t \t
\t \t \t \t \t if(idx !== openedIdx) {
\t \t \t \t \t \t $item.css('left', - (openedIdx - idx) * (cache.itemW * 3) + 'px').show().find('div.ca-content-wrapper').css({
\t \t \t \t \t \t \t left \t : cache.itemW + 'px',
\t \t \t \t \t \t \t width \t : cache.itemW * 2 + 'px'
\t \t \t \t \t \t });
\t \t \t \t \t \t
\t \t \t \t \t \t // hide more link
\t \t \t \t \t \t aux.toggleMore($item, false);
\t \t \t \t \t }
\t \t \t \t });
\t \t \t },
\t \t \t // show/hide the item's more button
\t \t \t toggleMore \t : function($item, show) {
\t \t \t \t (show) ? $item.find('a.ca-more').show() : $item.find('a.ca-more').hide(); \t
\t \t \t },
\t \t \t // close all the items
\t \t \t // the current one is animated
\t \t \t closeItems \t : function($wrapper, $openedItem, opts, cache) {
\t \t \t \t var openedIdx \t = $openedItem.index();
\t \t \t \t
\t \t \t \t $openedItem.find('div.ca-content-wrapper').stop().animate({
\t \t \t \t \t width \t : '0px'
\t \t \t \t }, opts.itemSpeed, opts.itemEasing)
\t \t \t \t .end()
\t \t \t \t .stop()
\t \t \t \t .animate({
\t \t \t \t \t left \t : cache.itemW * (cache.winpos - 1) + 'px'
\t \t \t \t }, opts.itemSpeed, opts.itemEasing, function() {
\t \t \t \t \t cache.isAnimating \t = false;
\t \t \t \t \t cache.expanded \t \t = false;
\t \t \t \t });
\t \t \t \t
\t \t \t \t // show more link
\t \t \t \t aux.toggleMore($openedItem, true);
\t \t \t \t
\t \t \t \t $wrapper.find('div.ca-item').each(function(i) {
\t \t \t \t \t var $item \t = $(this),
\t \t \t \t \t \t idx \t \t = $item.index();
\t \t \t \t \t
\t \t \t \t \t if(idx !== openedIdx) {
\t \t \t \t \t \t $item.find('div.ca-content-wrapper').css({
\t \t \t \t \t \t \t width \t : '0px'
\t \t \t \t \t \t })
\t \t \t \t \t \t .end()
\t \t \t \t \t \t .css('left', ((cache.winpos - 1) - (openedIdx - idx)) * cache.itemW + 'px')
\t \t \t \t \t \t .show();
\t \t \t \t \t \t
\t \t \t \t \t \t // show more link
\t \t \t \t \t \t aux.toggleMore($item, true);
\t \t \t \t \t }
\t \t \t \t });
\t \t \t },
\t \t \t // gets the item's position (1, 2, or 3) on the viewport (the visible items)
\t \t \t // val is the left of the item
\t \t \t getWinPos \t : function(val, cache) {
\t \t \t \t switch(val) {
\t \t \t \t \t case 0 \t \t \t \t \t : return 1; break;
\t \t \t \t \t case cache.itemW \t \t : return 2; break;
\t \t \t \t \t case cache.itemW * 2 \t : return 3; break;
\t \t \t \t }
\t \t \t }
\t \t },
\t \t methods = {
\t \t \t init \t \t : function(options) {
\t \t \t \t
\t \t \t \t if(this.length) {
\t \t \t \t \t
\t \t \t \t \t var settings = {
\t \t \t \t \t \t sliderSpeed \t \t : 500, \t \t \t // speed for the sliding animation
\t \t \t \t \t \t sliderEasing \t : 'easeOutExpo',// easing for the sliding animation
\t \t \t \t \t \t itemSpeed \t \t : 500, \t \t \t // speed for the item animation (open/close)
\t \t \t \t \t \t itemEasing \t \t : 'easeOutExpo',// easing for the item animation (open/close)
\t \t \t \t \t \t scroll \t \t \t : 1 \t \t \t \t // number of items to scroll at a time
\t \t \t \t \t };
\t \t \t \t \t
\t \t \t \t \t return this.each(function() {
\t \t \t \t \t \t
\t \t \t \t \t \t // if options exist, lets merge them with our default settings
\t \t \t \t \t \t if (options) {
\t \t \t \t \t \t \t $.extend(settings, options);
\t \t \t \t \t \t }
\t \t \t \t \t \t
\t \t \t \t \t \t var $el \t \t \t = $(this),
\t \t \t \t \t \t \t $wrapper \t \t = $el.find('div.ca-wrapper'),
\t \t \t \t \t \t \t $items \t \t \t = $wrapper.children('div.ca-item'),
\t \t \t \t \t \t \t cache \t \t \t = {};
\t \t \t \t \t \t
\t \t \t \t \t \t // save the with of one item \t
\t \t \t \t \t \t cache.itemW \t \t \t = $items.width();
\t \t \t \t \t \t // save the number of total items
\t \t \t \t \t \t cache.totalItems \t = $items.length;
\t \t \t \t \t \t
\t \t \t \t \t \t // add navigation buttons
\t \t \t \t \t \t if(cache.totalItems > 3) \t
\t \t \t \t \t \t \t $el.prepend('<div class="ca-nav"><span class="ca-nav-prev">Previous</span><span class="ca-nav-next">Next</span></div>') \t
\t \t \t \t \t \t
\t \t \t \t \t \t // control the scroll value
\t \t \t \t \t \t if(settings.scroll < 1)
\t \t \t \t \t \t \t settings.scroll = 1;
\t \t \t \t \t \t else if(settings.scroll > 3)
\t \t \t \t \t \t \t settings.scroll = 3; \t
\t \t \t \t \t \t
\t \t \t \t \t \t var $navPrev \t \t = $el.find('span.ca-nav-prev'),
\t \t \t \t \t \t \t $navNext \t \t = $el.find('span.ca-nav-next');
\t \t \t \t \t \t
\t \t \t \t \t \t // hide the items except the first 3
\t \t \t \t \t \t $wrapper.css('overflow', 'hidden');
\t \t \t \t \t \t
\t \t \t \t \t \t // the items will have position absolute
\t \t \t \t \t \t // calculate the left of each item
\t \t \t \t \t \t $items.each(function(i) {
\t \t \t \t \t \t \t $(this).css({
\t \t \t \t \t \t \t \t position \t : 'absolute',
\t \t \t \t \t \t \t \t left \t \t : i * cache.itemW + 'px'
\t \t \t \t \t \t \t });
\t \t \t \t \t \t });
\t \t \t \t \t \t
\t \t \t \t \t \t // click to open the item(s)
\t \t \t \t \t \t $el.find('a.ca-more').live('click.contentcarousel', function(event) {
\t \t \t \t \t \t \t if(cache.isAnimating) return false;
\t \t \t \t \t \t \t cache.isAnimating \t = true;
\t \t \t \t \t \t \t $(this).hide();
\t \t \t \t \t \t \t var $item \t = $(this).closest('div.ca-item');
\t \t \t \t \t \t \t aux.openItem($wrapper, $item, settings, cache);
\t \t \t \t \t \t \t return false;
\t \t \t \t \t \t });
\t \t \t \t \t \t
\t \t \t \t \t \t // click to close the item(s)
\t \t \t \t \t \t $el.find('a.ca-close').live('click.contentcarousel', function(event) {
\t \t \t \t \t \t \t if(cache.isAnimating) return false;
\t \t \t \t \t \t \t cache.isAnimating \t = true;
\t \t \t \t \t \t \t var $item \t = $(this).closest('div.ca-item');
\t \t \t \t \t \t \t aux.closeItems($wrapper, $item, settings, cache);
\t \t \t \t \t \t \t return false;
\t \t \t \t \t \t });
\t \t \t \t \t \t
\t \t \t \t \t \t // navigate left
\t \t \t \t \t \t $navPrev.bind('click.contentcarousel', function(event) {
\t \t \t \t \t \t \t if(cache.isAnimating) return false;
\t \t \t \t \t \t \t cache.isAnimating \t = true;
\t \t \t \t \t \t \t aux.navigate(-1, $el, $wrapper, settings, cache);
\t \t \t \t \t \t });
\t \t \t \t \t \t
\t \t \t \t \t \t // navigate right
\t \t \t \t \t \t $navNext.bind('click.contentcarousel', function(event) {
\t \t \t \t \t \t \t if(cache.isAnimating) return false;
\t \t \t \t \t \t \t cache.isAnimating \t = true;
\t \t \t \t \t \t \t aux.navigate(1, $el, $wrapper, settings, cache);
\t \t \t \t \t \t });
\t \t \t \t \t \t
\t \t \t \t \t \t // adds events to the mouse
\t \t \t \t \t \t $el.bind('mousewheel.contentcarousel', function(e, delta) {
\t \t \t \t \t \t \t if(delta > 0) {
\t \t \t \t \t \t \t \t if(cache.isAnimating) return false;
\t \t \t \t \t \t \t \t cache.isAnimating \t = true;
\t \t \t \t \t \t \t \t aux.navigate(-1, $el, $wrapper, settings, cache);
\t \t \t \t \t \t \t } \t
\t \t \t \t \t \t \t else {
\t \t \t \t \t \t \t \t if(cache.isAnimating) return false;
\t \t \t \t \t \t \t \t cache.isAnimating \t = true;
\t \t \t \t \t \t \t \t aux.navigate(1, $el, $wrapper, settings, cache);
\t \t \t \t \t \t \t } \t
\t \t \t \t \t \t \t return false;
\t \t \t \t \t \t });
\t \t \t \t \t \t
\t \t \t \t \t });
\t \t \t \t }
\t \t \t }
\t \t };
\t
\t $.fn.contentcarousel = function(method) {
\t \t if (methods[method]) {
\t \t \t return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
\t \t } else if (typeof method === 'object' || ! method) {
\t \t \t return methods.init.apply(this, arguments);
\t \t } else {
\t \t \t $.error('Method ' + method + ' does not exist on jQuery.contentcarousel');
\t \t }
\t };
\t
})(jQuery);/* Circular Content Carousel Style */
/*Three points are very important when we want the image to fit the space required: by default: .ca-container{width:1205px;}, .ca-item{width:410px;}, .ca-item-main{width:380px;} */
.ca-container{
\t position:relative;
\t margin:25px auto 20px auto;
\t width:1205px;
\t height:650px;
}
.ca-wrapper{
\t width:100%;
\t height:100%;
\t position:relative;
}
.ca-item{
\t position:relative;
\t float:left;
\t width:410px;
\t height:100%;
\t text-align:center;
}
.ca-item-main{
\t position:absolute;
\t width: 380px;
\t top:5px;
\t left:5px;
\t right:5px;
\t bottom:5px;
\t background:#fff;
\t overflow:hidden;
\t -moz-box-shadow:1px 1px 2px rgba(0,0,0,0.2);
\t -webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.2);
\t box-shadow:1px 1px 2px rgba(0,0,0,0.2);
}
.ca-nav span{
\t width:25px;
\t height:38px;
\t background:transparent url(../images/arrows.png) no-repeat top left;
\t position:absolute;
\t top:50%;
\t margin-top:-19px;
\t left:-40px;
\t text-indent:-9000px;
\t opacity:0.7;
\t cursor:pointer;
\t z-index:100;
}
.ca-nav span.ca-nav-next{
\t background-position:top right;
\t left:auto;
\t right:-40px;
}
.ca-nav span:hover{
\t opacity:1.0;
}
/*Text over image*/
h2.header {
bottom: 0;
position: absolute;
text-align: center;
\t margin: 0;
width: 100%;
background-color: rgba(0,0,0,0.7);
\t padding: 35px 0px 35px 0px;
\t font-family: FeaturedItem;
}
.wrapper {
display: inline-block;
position: relative;
}
.wrapper img {
display: block;
max-width:100%;
}
.wrapper .overlay {
position: absolute;
top:0;
left:0;
width:380px;
height:100%;
color:white;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Circular Content Carousel with jQuery</title>
\t \t <meta charset="UTF-8" />
\t \t <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
\t \t <meta name="viewport" content="width=device-width, initial-scale=1.0">
\t \t <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
\t \t <div class="container">
\t \t \t <div id="ca-container" class="ca-container">
\t \t \t \t <div class="ca-wrapper">
\t \t \t \t \t <div class="ca-item ca-item-1">
\t \t \t \t \t \t <div class="ca-item-main">
\t \t \t \t \t \t \t <div class="wrapper">
\t \t \t \t \t \t \t \t <img src="images/2.jpg" alt="" />
\t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t <div class="overlay">
\t \t \t \t \t \t \t \t \t <h2 class="header">A Movie in the Park: Kung Fu Panda</h2>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t \t \t
\t \t \t \t \t <div class="ca-item ca-item-2">
\t \t \t \t \t \t <div class="ca-item-main">
\t \t \t \t \t \t \t <div class="wrapper">
\t \t \t \t \t \t \t \t <img src="images/5.jpg" alt="" />
\t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t <div class="overlay">
\t \t \t \t \t \t \t \t \t <h2 class="header">A Movie in the Park: Kung Fu Panda</h2>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t \t \t
\t \t \t \t \t <div class="ca-item ca-item-3">
\t \t \t \t \t \t <div class="ca-item-main">
\t \t \t \t \t \t \t <div class="wrapper">
\t \t \t \t \t \t \t \t <img src="images/6.jpg" alt="" />
\t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t <div class="overlay">
\t \t \t \t \t \t \t \t \t <h2 class="header">A Movie in the Park: Kung Fu Panda</h2>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t \t \t
\t \t \t \t \t <div class="ca-item ca-item-4">
\t \t \t \t \t \t <div class="ca-item-main">
\t \t \t \t \t \t \t <div class="wrapper">
\t \t \t \t \t \t \t \t <img src="images/2.jpg" alt="" />
\t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t <div class="overlay">
\t \t \t \t \t \t \t \t \t <h2 class="header">A Movie in the Park: Kung Fu Panda</h2>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t \t \t
\t \t \t \t \t <div class="ca-item ca-item-5">
\t \t \t \t \t \t <div class="ca-item-main">
\t \t \t \t \t \t \t <div class="wrapper">
\t \t \t \t \t \t \t \t <img src="images/5.jpg" alt="" />
\t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t <div class="overlay">
\t \t \t \t \t \t \t \t \t <h2 class="header">A Movie in the Park: Kung Fu Panda</h2>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t \t \t
\t \t \t \t \t <div class="ca-item ca-item-6">
\t \t \t \t \t \t <div class="ca-item-main">
\t \t \t \t \t \t \t <div class="wrapper">
\t \t \t \t \t \t \t \t <img src="images/6.jpg" alt="" />
\t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t <div class="overlay">
\t \t \t \t \t \t \t \t \t <h2 class="header">A Movie in the Park: Kung Fu Panda</h2>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t \t \t
\t \t \t \t \t <div class="ca-item ca-item-7">
\t \t \t \t \t \t <div class="ca-item-main">
\t \t \t \t \t \t \t <div class="wrapper">
\t \t \t \t \t \t \t \t <img src="images/2.jpg" alt="" />
\t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t <div class="overlay">
\t \t \t \t \t \t \t \t \t <h2 class="header">A Movie in the Park: Kung Fu Panda</h2>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t \t \t
\t \t \t \t \t <div class="ca-item ca-item-8">
\t \t \t \t \t \t <div class="ca-item-main">
\t \t \t \t \t \t \t <div class="wrapper">
\t \t \t \t \t \t \t \t <img src="images/5.jpg" alt="" />
\t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t <div class="overlay">
\t \t \t \t \t \t \t \t \t <h2 class="header">A Movie in the Park: Kung Fu Panda</h2>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t </div>
\t \t </div>
\t \t <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
\t \t <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
\t \t <!-- the jScrollPane script -->
\t \t <script type="text/javascript" src="js/jquery.contentcarousel.js"></script>
\t \t <script type="text/javascript">
\t \t \t $('#ca-container').contentcarousel();
\t \t </script>
</body>
</html>Wenn jemand den Code in lokalen dann eine ZIP-Datei hier laufen müssen, ist: https://www.dropbox.com/s/x0pgyk8mbplgih0/carousel.zip?dl=0
lassen Sie es mich wissen, wie dieses Problem zu lösen. Danke im Voraus.
nehmen Sie bitte eine Minute und sehen, wie die Leute Fragen hier stellen. Sie melden CODE. Bitte poste einen relevanten Code. –
Bevor Sie eine neue Frage stellen, lesen Sie bitte [Hilfe] und [Fragen] –
Ok danke. Ich bin neu, denke ich muss gehen und sehen, wie die Beiträge aussehen –