过渡保持结构上的光滑滑块

Question

我正在使用光滑的滑块并尝试为实际的滑块创建特定的设计。我基本上需要的是类似这样的结构：

div             div
    div     div
        div

我已经能够在 sliding/transition 中让这个设计工作悬停，通过它自动转到这个设计

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;
}

到目前为止，我观察到的是它在幻灯片完成过渡后为结构更改添加了 class，因此在 JS 中添加了 'afterChange'。但是，当过渡也到位时，是否有可能获得要应用的结构。

Answer 1

试试这个：

.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 slider 添加元素（slick-cloned），这就是您在设置样式时遇到问题的原因。现在你不需要所有这些 javascript 魔法 ;) Here is nice explanation 个 nth-child。

注意使用 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 2

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

尝试使用 class 名称代替第 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){}

Answer 3

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

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

});

.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);
}

<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>

过渡保持结构上的光滑滑块

slick slider on transition keep structure

javascript

jquery

html

css

slick.js