Slick Slider am Übergang Struktur behalten

Question

Ich verwende den Slick-Schieberegler und versuche, ein bestimmtes Design für den eigentlichen Schieberegler zu erstellen. Was ich grundsätzlich brauche, ist eine ähnliche Struktur:

div             div
    div     div
        div

Ich konnte dieses Design zum Schweben bringen, wenn beim Gleiten / Übergang automatisch zu diesem Design gewechselt wird

div div div div div

Wo es zurück zum ursprünglichen Design geht. Ich würde gerne wissen, ob es möglich ist, das Top-Design beim Übergang beizubehalten. Unten ist mein aktuelles CSS, HTML und 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");
});

Ich vermute, anstelle des Randes sollte es eine Art Versatz geben, bei dem jedes Div berechnet wird, sobald der Code gleitet. Hier ist die Dokumentation für Slick Slider: http://kenwheeler.github.io/slick/

BEARBEITEN

Ich habe auch in diesem CSS hinzugefügt, anstatt den Divs einen Rand hinzuzufügen.

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

Bisher habe ich beobachtet, dass die Klasse für die Strukturänderung hinzugefügt wird, nachdem die Folie den Übergang abgeschlossen hat, daher die 'afterChange' in der JS. Aber wäre es möglich, die Struktur anzuwenden, wenn der Übergang auch vorhanden ist?

javascript jquery html css slick.js

1

jsg 17 Aug. 2015 im 12:08

Answer 1

Das offensichtliche Problem hierbei ist die Endlosschleife.
Vielleicht schafft es jemand eines Tages, das herauszufinden, aber wenn Sie bereit sind, das aufzugeben, sollte dies den Trick tun.
Es funktioniert mit einer beliebigen Anzahl von Folien.

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

4

Mihai Vilcu 19 Aug. 2015 im 16:03

Answer 2

Versuche dies:

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

Der Slick-Schieberegler fügt Elemente hinzu (slick-cloned). Deshalb hatten Sie Probleme beim Stylen. Jetzt brauchst du nicht mehr all diese Javascript-Magie;) Hier ist eine nette Erklärung von nth-child.

Achten Sie auf die Verwendung von nth-child, da dies nicht immer so funktioniert, wie Sie vielleicht denken. Beispielsweise:

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

Was werden Hintergründe dieser Elemente sein?

0

Volvox 19 Aug. 2015 im 12:03

Answer 3

Ich bin mir nicht sicher, aber ich denke: Der Slick-Schieberegler fügt Elemente hinzu und entfernt sie, wenn Sie sie verschieben oder wischen, sodass der von Ihnen verwendete n-te untergeordnete Selektor nicht gut funktioniert.

Versuchen Sie, den Klassennamen anstelle des n-ten Selektors zu verwenden, z.

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

Oder Sie können die Zyklusgröße im n-ten untergeordneten Selektor entsprechend definieren, wie z.

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

0

sumitmann 19 Aug. 2015 im 11:56

Slick Slider am Übergang Struktur behalten

3 Antworten

Verwandte Fragen

Neue Fragen