webentwicklung-frage-antwort-db.com.de

slick Slider - CSS-Übergang Endlosschleife

Ich habe einen Slider mit Slick-Slider eingerichtet. Wenn Sie die Schaltflächen Weiter und Zurück verwenden, wird das Element mit einem Nice-Übergang angezeigt. Das Problem, das ich habe, ist, dass, wenn es seinen Zyklus neu startet, das erste Element "in den Blick" schnappt, anstatt den Übergang durchzuführen. Außerdem scheint es, als ob es die interne Indizierung verliert, da die Klassen "ungerade" und "gerade" geändert werden. Siehe Ausschnitt unten:

$(document).ready(function() {
    $('.items').slick({
        slidesToShow: 2,
        speed: 500
    });
});
* {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
  height: 150px;
}

.slick-list, .slick-track {
  height: 100%;
}

ul li {
  width: 350px;
  height: 100%;
}

ul li .content {
  width: 100%;
  height: 100%;
  transition: transform 0.5s linear;
  text-align: center;
}

ul li .content span {
  color: #fff;
  font-size: 50px;
  font-family: Arial;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  display: block;
}

ul li:nth-child(odd) .content {
  background-color: red;
}

ul li:nth-child(even) .content {
  background-color: green;
}

ul li:not(.slick-current) .content {
  transform: scale(0.9);
}
<link href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<ul class="items">
  <li class="item">
    <div class="content">
      <span>1</span>
    </div>
  </li>

  <li class="item">
    <div class="content">
      <span>2</span>
    </div>
  </li>

  <li class="item">
    <div class="content">
      <span>3</span>
    </div>
  </li>

  <li class="item">
    <div class="content">
      <span>4</span>
    </div>
  </li>

  <li class="item">
    <div class="content">
      <span>5</span>
    </div>
  </li>
</ul>

Ich denke, ich weiß, warum das so ist, weil es "geklonte" Elemente erstellen muss, damit die Endlosschleifen-Funktion funktioniert. Ich habe ein paar verschiedene Slider-Plugins ausprobiert und sie scheinen alle ähnliche Probleme zu haben.

Weiß jemand, wie ich das beheben kann? jsfiddle hier: https://jsfiddle.net/7kdmwkd9/1/

13
GSTAR

Lösung 1 - Flickity verwenden

Wenn Sie eine andere Karussellsteuerung ausprobieren möchten, können Sie nach Flickity suchen. Nach meinen Tests mit der Option wrapAround "schnappt" das erste Element nicht wieder in Position, wenn der volle Zyklus abgeschlossen ist. Der Übergang verläuft reibungslos. Sie können es bei der Arbeit in this jsfiddle sehen.

Das Problem beim Formatieren der Elemente nach ihrem geraden/ungeraden Index tritt nur dann auf, wenn Sie eine ungerade Anzahl von Elementen haben. Eine Lösung wäre, die Liste der Elemente zu duplizieren. Intead von 

Item 1 / Item 2 / Item 3 / Item 4 / Item 5

du könntest definieren

Item 1 / Item 2 / Item 3 / Item 4 / Item 5 / Item 1 / Item 2 / Item 3 / Item 4 / Item 5

Das würde sicherstellen, dass Sie mit einer geraden Anzahl von Elementen arbeiten.


Lösung 2 - Slick Slider: Übergangsverzögerung hinzufügen

Wenn Sie mit dem Slick Slider eine Verzögerung hinzufügen, wird der Übergang glatter, wenn der Zyklus abgeschlossen ist. Im folgenden Code-Snippet habe ich Folgendes ersetzt:

ul li .content {
  transition: transform 0.5s linear;
  ...
}

ul li:not(.slick-current) .content {
  transform: scale(0.9);
}

mit

ul li .content {
  transition: transform 0.3s linear;
  transition-delay: 0.5s;
  ...
}

ul li:not(.slick-current) .content {
  transform: scale(0.9);
  transition-delay: 0s;
}

$(document).ready(function() {
  $('.items').slick({
    infinite: true,
    speed: 500,
    slidesToShow: 2,
    variableWidth: false
  });
});
* {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
  height: 150px;
}

.slick-list,
.slick-track {
  height: 100%;
}

ul li {
  width: 350px;
  height: 100%;
}

ul li .content {
  width: 100%;
  height: 100%;
  transition: transform 0.3s linear;
  transition-delay: 0.5s;
  text-align: center;
}

ul li .content span {
  color: #fff;
  font-size: 50px;
  font-family: Arial;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  display: block;
}

ul li:nth-child(odd) .content {
  background-color: red;
}

ul li:nth-child(even) .content {
  background-color: green;
}

ul li:not(.slick-current) .content {
  transform: scale(0.9);
  transition-delay: 0s;
}
<link href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<ul class="items">
  <li class="item">
    <div class="content">
      <span>1</span>
    </div>
  </li>
  <li class="item">
    <div class="content">
      <span>2</span>
    </div>
  </li>
  <li class="item">
    <div class="content">
      <span>3</span>
    </div>
  </li>
  <li class="item">
    <div class="content">
      <span>4</span>
    </div>
  </li>
  <li class="item">
    <div class="content">
      <span>5</span>
    </div>
  </li>
  <li class="item">
    <div class="content">
      <span>1</span>
    </div>
  </li>
  <li class="item">
    <div class="content">
      <span>2</span>
    </div>
  </li>
  <li class="item">
    <div class="content">
      <span>3</span>
    </div>
  </li>
  <li class="item">
    <div class="content">
      <span>4</span>
    </div>
  </li>
  <li class="item">
    <div class="content">
      <span>5</span>
    </div>
  </li>
</ul>

10
ConnorsFan

@GSTAR, Eventuell gibt es keinen Fehler in Ihrem Code, aber es gibt ein bisschen css und js flow, das Sie verstehen müssen, wenn Sie Slick verwenden.

Mit Slick werden Ihre Folien geklont und oben und unten auf der Folie geändert. wie unten beschreiben.

Ihr Code vor der Slick-Implementierung

<ul class="items">
    <li class="item"><div class="content"><span>1</span></div></li>
    <li class="item"><div class="content"><span>2</span></div></li>
    <li class="item"><div class="content"><span>3</span></div></li>
    <li class="item"><div class="content"><span>4</span></div></li>
    <li class="item"><div class="content"><span>5</span></div></li>
    <li class="item"><div class="content"><span>6</span></div></li>
</ul>

Ihr Code nach der Slick-Implementierung

<ul class="items">
    <li class="item slick-cloned"><div class="content"><span>4</span></div></li>
    <li class="item slick-cloned"><div class="content"><span>5</span></div></li>
    <li class="item slick-cloned"><div class="content"><span>6</span></div></li>

    <li class="item"><div class="content"><span>1</span></div></li>
    <li class="item"><div class="content"><span>2</span></div></li>
    <li class="item"><div class="content"><span>3</span></div></li>
    <li class="item"><div class="content"><span>4</span></div></li>
    <li class="item"><div class="content"><span>5</span></div></li>
    <li class="item"><div class="content"><span>6</span></div></li>

    <li class="item slick-cloned"><div class="content"><span>1</span></div></li>
    <li class="item slick-cloned"><div class="content"><span>2</span></div></li>
    <li class="item slick-cloned"><div class="content"><span>3</span></div></li>
</ul>

Nachdem Sie dies hinzugefügt haben, funktioniert Ihr animation-Code einwandfrei. aber es kann nicht visuell sichtbar sein. Wenn Sie diese animation-Zeit erhöhen, wird Ihr Browser nicht snaps.

Wenn Sie Javascript-Code ersetzen, werden Sie wissen, was passiert.

<script type="text/javascript">
    $(document).ready(function() {
        $('.items').slick({
            centerMode:true,
            slidesToShow: 3,
            speed: 500,
            infinite: true,
            cssEase: 'linear',
            variableWidth: true
        });
    });
</script>

Nach der Schleife sind Sie also fertig und erreichen die erste ausgeführte Folienanimation, bevor sie erreicht wird.

Bitte überprüfen Sie unten meinen Ausschnitt.

$(document).ready(function() {
    $('.items').slick({
        slidesToShow: 2,
        speed: 500
    });
});
* {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
  height: 150px;
}

.slick-list, .slick-track {
  height: 100%;
}

ul li {
  width: 350px;
  height: 100%;
}

ul li .content {
  width: 100%;
  height: 100%;
  transition: transform 0.5s linear;
  transition-delay: 0.5s;
  text-align: center;
}

ul li .content span {
  color: #fff;
  font-size: 50px;
  font-family: Arial;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  display: block;
}

ul li:nth-child(odd) .content {
  background-color: red;
}

ul li:nth-child(even) .content {
  background-color: green;
}

ul li:not(.slick-current) .content {
  transform: scale(0.9);
}
<link href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<ul class="items">
  <li class="item">
    <div class="content">
      <span>1</span>
    </div>
  </li>

  <li class="item">
    <div class="content">
      <span>2</span>
    </div>
  </li>

  <li class="item">
    <div class="content">
      <span>3</span>
    </div>
  </li>

  <li class="item">
    <div class="content">
      <span>4</span>
    </div>
  </li>

  <li class="item">
    <div class="content">
      <span>5</span>
    </div>
  </li>
  <li class="item">
    <div class="content">
      <span>6</span>
    </div>
  </li>
</ul>

In der Endlosschleife haben Sie die Benutzer odd und even css, so dass Ihre nächste first-Folie (geklonte Folie) in der Schleife grün ist, aber Ihre ursprüngliche Folie (erste Folie) hat rote Farbe, daher auch die Farbe. Wenn Sie eine Anzahl von Folien in %2 verwenden, wird dies nicht passieren.

 enter image description here

Hoffe, es wird dir helfen, besser zu verstehen.

5

Dies ist kein Problem, es ist eine Funktion - so funktionieren Slick-Slider (und die meisten anderen Endlos-Loop-Slider). Wenn der Schieberegler nur divs klonen würde, würde dies zu einem riesigen Performance-Problem führen. In bestimmten Bereichen (Anfang/Ende) nach der Animation wird das Ganze neu gerendert, um von vorne zu beginnen.

Wenn Sie daran interessiert sind, ist ein Proof-of-Concept des Schiebereglers, der auf dem Übergang basiert und nichts kopiert, nur Positionen ändert. Vielleicht gibt es auch die Möglichkeit, dasselbe mit order zu erreichen - habe es nicht versucht, aber jetzt darüber nachgedacht.

https://codepen.io/prowseed/pen/QMEQxg - Natürlich erfordert es eine Menge Arbeit, um es voll nutzbar zu machen, aber ich habe versucht, es ansprechend und ähnlich zu Ihrem Beispiel zu machen. Sie müssen lediglich den Index nachverfolgen, um bestimmte Klassen hinzuzufügen/zu entfernen (beispielsweise .current).

3
Maciej Kwas

Hier mein Hack für slick.js Warnung !! Verwenden Sie es sorgfältig, verursachen Sie den Quellcode des Plugins

1) Funktion suchen
Slick.prototype.setSlideClasses und ersetzen Sie seine Definition von 

 Slick.prototype.setSlideClasses = function(index) 

zu 

Slick.prototype.setSlideClasses = function(index, oldSlide)

2) im Körper dieser Funktion nach dem Code

_.$slides
    .eq(index)
    .addClass('slick-current');

hinzufügen

if(oldSlide!=undefined){
    if(index==0 && oldSlide!=1){
        var _current = this.$slides.eq(this.$slides.size()-1);
        var __index = allSlides.index(_current);
        var ss = allSlides.eq(__index+1);
        ss.addClass('slick-current');
    }
    if(index==this.$slides.size()-1 && oldSlide!=this.$slides.size()-2){
        var _current = this.$slides.eq(0);
        var __index = allSlides.index(_current);
        var ss = allSlides.eq(__index-1);
        ss.addClass('slick-current');
    }
}

3) Finden Sie die Funktion Slick.prototype.slideHandler .__

oldSlide = _.currentSlide;
_.currentSlide = animSlide;
_.setSlideClasses(_.currentSlide);

zu

oldSlide = _.currentSlide;
_.currentSlide = animSlide;
_.setSlideClasses(_.currentSlide,oldSlide);
1
rudenich

@ Maciej Kwas

Es könnte eine Funktion sein, aber auf dieser Site funktioniert der Schieberegler mit "Center-Modus" einwandfrei. Die Animation sieht gut aus, wenn sie vom letzten zur ersten Folie verschoben wird http://kenwheeler.github.io/ glatt/

0