jquery - 自动滑动 JQUERY

Question

我正要使用 jquery 开发一个自动幻灯片，逻辑运行完美，但每个幻灯片中的所有三个 div 都碰巧没有正确显示。谁能帮我解决代码错误？

我只需要 3 个 div 正确适合每个幻灯片。非常感谢您的建议。

HTML

<div class="container ">
  <div class="row ">
   <div id="carousel" class="carousel col-md-12 ">
     <div style="width:324px;height:200px;border:1px solid #000;float:left;margin-left:4px;">Div1 Content</div>
     <div style="width:324px;height:200px;border:1px solid #000;float:left;margin-left:4px;">Div2 Content</div>
     <div style="width:324px;height:200px;border:1px solid #000;float:left;margin-left:4px;">Div3 Content</div> 
     <div style="width:324px;height:200px;border:1px solid #000;float:left;margin-left:4px;">Div4 Content</div>
     <div style="width:324px;height:200px;border:1px solid #000;float:left;margin-left:4px;">Div5 Content</div>
     <div style="width:324px;height:200px;border:1px solid #000;float:left;margin-left:4px;">Div6 Content</div>
     <div style="width:324px;height:200px;border:1px solid #000;float:left;margin-left:4px;">Div7 Content</div>
     <div style="width:324px;height:200px;border:1px solid #000;float:left;margin-left:4px;">Div8 Content</div>
     <div style="width:324px;height:200px;border:1px solid #000;float:left;margin-left:4px;">Div9 Content</div>
     <div style="width:324px;height:200px;border:1px solid #000;float:left;margin-left:4px;">Div10 Content</div>
     <div style="width:324px;height:200px;border:1px solid #000;float:left;margin-left:4px;">Div11 Content</div>
     <div style="width:324px;height:200px;border:1px solid #000;float:left;margin-left:4px;">Div12 Content</div>

   </div>  
  </div>    
 </div>

CSS

.container { padding-top:0px; border:1px solid green; margin:0px auto; width:970px; }

.slick-slider { position: relative; display: block; box-sizing: border-box; -moz-box-sizing: border-box;
               -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select:none;
               user-select: none; -ms-touch-action: none; touch-action: none; -webkit-tap-highlight-color: transparent; margin-bottom: 0px; }

.slick-list { position: relative; overflow: hidden; display: block; margin: 0; padding: 0; }

.slick-slide { float: left; height: 100%; min-height: 1px; display: none; }

.slick-slide.dragging img { pointer-events: none; }

.slick-initialized .slick-slide { display: block; }

.slick-prev, .slick-next { position: absolute; display: block; height: 20px; width:0px; line-height: 0; font-size: 0; cursor: pointer; background: transparent; color: transparent; top: 50%; margin-top: -10px; padding: 0; border: none; outline: none; }

.slick-prev:before, .slick-next:before { font-family: "slick"; font-size: 20px; line-height: 1; color: white; opacity: 0.85; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.slick-prev { left: -25px; }
.slick-prev:before { content: "\2190"; }

.slick-next { right: -25px; }
.slick-next:before { content: "\2192"; }


.slick-prev:before, .slick-next:before { color: black; }

.client-text li {left:0;right:0;margin:auto;list-style:none;margin:0px;z-index:9999;color:black;}

.slick-slide { width:300px; margin-right:0px; margin-left:4px; }

JQUERY

 $ (document).ready(function()
       {
         $ ('.carousel').slick
         ({
            slidesToShow: 3,
            slidesToScroll: 1,
            autoplay: true,
            autoplaySpeed: 2000,
         });
       });

JSFIDDLE

http://jsfiddle.net/gansai/zteh64L5/1/

Answer 1

通过将边距直接放在 slick-slide 类中，您会影响插件的计算。您需要删除 div 中的内联样式，并在主幻灯片中创建一个 div，如下所示:

 <div ><div class="content">Div1 Content</div></div>

然后在你的 css 中删除你的 slick-slice 类 css 的内容并添加:

.carousel > div  >div > div .content {
    border:1px solid #000;
    height:200px;
}

在这里检查我对你的 jsFiddle 的修改:

http://jsfiddle.net/zteh64L5/5/