Question

我正在使用光滑的滑块并尝试为实际滑块创建某个设计。我基本上需要的是一个与此类似的结构：

div             div
    div     div
        div

我已经能够让这个设计在滑动/过渡时自动转到它设计

div div div div div

它回归原始设计。我想知道它是否有可能在过渡时保持顶级设计。下面是我目前的CSS，HTML和jQuery。

HTML：

<div class="loop">
  <div class="product"> Your Content </div>
  <div class="product"> Your Content </div>
  <div class="product"> Your Content </div>
  <div class="product"> Your Content </div>
  <div class="product"> Your Content </div>
  <div class="product"> Your Content </div>
  <div class="product"> Your Content </div>
</div>

CSS：

.active:first-child {
    margin-top: 10px; }

.test, .slick-active:nth-child(1), .slick-active:nth-child(5) {
    margin-top: 10px; }

.test-2, .slick-active:nth-child(2), .slick-active:nth-child(4) {
    margin-top: 40px; }

.center-test, .slick-active:nth-child(3) {
    margin-top: 70px; }

JavaScript的：

$(document).ready(function () {
var loop = $(".loop");
loop.slick({
    slidesToShow: 5,
    sliderPerRow: 1,
    swipeToSlide: true
});
loop.on('afterChange', function (event, slick, currentSlide, nextSlide) {
    loop.find(".slick-active").first().addClass("test");
    loop.find(".slick-active").last().addClass("test");
    loop.find(".slick-active").eq(1).addClass("test-2");
    loop.find(".slick-active").eq(3).addClass("test-2");
    loop.find(".slick-active").eq(2).addClass("center-test");

});
loop.on('beforeChange', function (event, slick, currentSlide, nextSlide) {
    loop.find(".slick-active ").removeClass("test");
    loop.find(".slick-active ").removeClass("test-2");
    loop.find(".slick-active ").removeClass("center-test");

});
loop.find(".slick-active").removeClass("test");
loop.find(".slick-active").first().addClass("test");
loop.find(".slick-active").last().addClass("test");
loop.find(".slick-active").eq(1).addClass("test-2");
loop.find(".slick-active").eq(3).addClass("test-2");
loop.find(".slick-active").eq(2).addClass("center-test");
});

我猜测而不是边距应该有某种偏移，一旦代码滑动，每个div都在计算中。以下是光滑滑块的文档： http://kenwheeler.github.io/slick/

修改

我也在这个css中添加了内容，而不是为div添加一个余量。

.test, .slick-active:nth-child(1), .slick-active:nth-child(5){
top:10px;
position:relative;
}
.test-2, .slick-active:nth-child(2), .slick-active:nth-child(4){
top:40px;
position:relative;
}
.center-test, .slick-active:nth-child(3){
top:70px;
position:relative;
}
.slick-track{
height:100px;
}

到目前为止，我所观察到的是，它在幻灯片完成转换后为结构更改添加了类，因此“更改后”＆＃39;在JS中。但是，当转换也到位时，是否可以使结构得以应用。

Answer 1

这里显而易见的问题是无限循环也许有人会设法解决这一问题但是现在如果你愿意放弃它，这应该可以解决问题它适用于任意数量的幻灯片。

＆＃13;

$(document).ready(function () {
  var $loop = $(".loop");
  
  $loop.slick({
      slidesToShow: 5,
      sliderPerRow: 1,
      swipeToSlide: true,
      speed: 500,
      infinite: false
  });

});

＆＃13;

.slick-track{
  height:100px;
}


.loop .product {
  background: #ccc;
  outline: 1px solid black;
  transition: transform .5s; /* same duration as in js */
  transform: translateY(0);
}


.loop .product.slick-current + .product {
  transform: translateY(30px);
}

.loop .product.slick-current + .product + .product {
  transform: translateY(50px);
}

.loop .product.slick-current + .product + .product + .product {
  transform: translateY(30px);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.5.7/slick.css"/>
  <script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.5.7/slick.min.js"></script>


<div class="loop">
  <div class="product"> Your ContentA </div>
  <div class="product"> Your ContentB </div>
  <div class="product"> Your ContentC </div>
  <div class="product"> Your Content1 </div>
  <div class="product"> Your Content2 </div>
  <div class="product"> Your Content3 </div>
  <div class="product"> Your Content4 </div>
  <div class="product"> Your Content5 </div>
  <div class="product"> Your Content6 </div>
  <div class="product"> Your Content7 </div>
</div>

＆＃13;

Answer 2

试试这个：

.product:nth-child(5n+1),
.product:nth-child(5n+5)
{
    top:10px;
    position:relative;
}
.product:nth-child(5n+2),
.product:nth-child(5n+4)
{
    top:40px;
    position:relative;
}
.product:nth-child(5n+3)
{
    top:70px;
    position:relative;
}

光滑滑块添加了元素（slick-cloned），这就是为什么你在设置样式时遇到问题。现在你不需要所有这些javascript魔法;） nth-child的{{3}}。

注意使用nth-child，因为它并不总是像您想象的那样有效。例如：

<style>
    .product:nth-child(1){background:red;}
    .product:nth-child(2){background:blue;}
</style>
<div class="loop">
    <div class="promo"> Some promo </div>
    <div class="product"> Your Content1 </div>
    <div class="product"> Your Content2 </div>
</div>

这些元素的背景是什么？

Answer 3

我不确定，但我认为：光滑滑块可在滑动或滑动时添加和删除元素，因此您使用的第n个子选择器将无法正常工作。

尝试使用类名而不是第n个选择器，例如：

 .test, .slick-active:frstchild{
    top:10px;
    position:relative;
    }

<div class="loop">
      <div class="product frstchild"> Your Content </div>
      <div class="product"> Your Content </div>
      <div class="product"> Your Content </div>
      <div class="product"> Your Content </div>
      <div class="product frstchild"> Your Content </div>
      <div class="product"> Your Content </div>
      <div class="product"> Your Content </div>
    </div>

或者您可以相应地在第n个子选择器中使用定义循环大小，例如：

.test, .slick-active:frstchild(3n+1){}

转换上的光滑滑块保持结构

3 个答案: