Slick: Wie wiederhole ich unendlich?

Ich habe 4 Bilder insgesamt, die alle auf dem Bildschirm angezeigt werden. Was ich will, ist, sobald ein Benutzer auf die nächste Schaltfläche klickt, um das 4. Bild als 1. erscheinen zu lassen, während vorher das 1. Bild nun 2. und so weiter wäre.Slick: Wie wiederhole ich unendlich?

Dies ist ein Stück meines js Code:

infinite: true, 
    slidesToShow: 4, 
    slidesToScroll: 1,

Unendlichen true gesetzt ist, aber es funktioniert nicht so, wie ich es will, wenn es weniger als 5 Bilder insgesamt.

Ich habe hier nach der Antwort gesucht, und konnten zwei ähnliche Fragen finden, aber beide hatten keine richtige Antwort. Links für diese: How to make slick carousel images repeat infinitely und how could i make slides infinite (slick slider).

Quelle

2017-03-29 Rachel Nicolas

Wie funktioniert es? Scheint in Ordnung mit Ihrem Stück Code ... – hering

@hering es funktioniert unendlich, wenn ich 5 oder mehr Bilder habe, aber ich brauche nur 4 –

@RachelNicolas Ihr Code scheint in Ordnung, wäre es möglich für Sie zu posten Rest der Codes oder teilen eine jfiddle? das würde es für jeden einfacher machen, eine Antwort zu geben. – azs06

Dies erklärt nicht, warum dieser Code nicht funktioniert, aber hier ist ein Hotfix!

Sie können Ihren Satz von Bildern duplizieren, also wo Sie einmal hatten:

ABCD

Sie jetzt haben:

ABCDABCD

Dieser Wille Schleife jetzt unendlich, so wie du es willst.

Quelle

2017-03-29 15:10:41

hmm es behebt dieses Problem total, aber leider kann es in meinem Fall keine Lösung sein –

rachel nicolas .. Sie können dies versuchen und etwas daraus lernen. Ich habe vor zwei Monaten an einem Glattkarussell gearbeitet.

$(document).ready(function() { 
 
    $('.sliderman').slick({ 
 
    infinite: true, 
 
    dots: true, 
 
    slidesToShow: 4, 
 
    slidesToScroll: 1, 
 
    autoplay: true, 
 
    autoplaySpeed: 2000 
 
    }); 
 
});

body { 
 
    background-color: gray; 
 
    padding: 25px; 
 
} 
 

 
.box { 
 
    border-style: solid; 
 
    border-color: white; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <title>Slick Carousel</title> 
 
    <link rel="stylesheet" href="http://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.css"> 
 
</head> 
 

 
<body> 
 

 
    <div class="sliderman" style="width: 600px;"> 
 
    <div class="box"><img src="http://www.toyota.com/content/common/img/jellies/homepage/2017/camry-front.png" width="100px" height="100px"></div> 
 
    <div class="box"><img src="http://www.toyota.com/content/common/img/jellies/homepage/2017/sienna-front.png" width="100px" height="100px"></div> 
 
    <div class="box"><img src="http://www.toyota.com/content/common/img/jellies/homepage/2017/corolla-front.png" width="100px" height="100px"></div> 
 
    <div class="box"><img src="http://www.toyota.com/content/common/img/jellies/homepage/2017/yarisia-front.png" width="100px" height="100px"></div> 
 
    <div class="box"><img src="http://www.toyota.com/content/common/img/jellies/homepage/2017/corolla-front.png" width="100px" height="100px"></div> 
 
    </div> 
 

 

 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
 
    <script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 
 
    <script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script> 
 
</body> 
 

 
</html>

Quelle

2017-03-29 16:11:53

ich habe das schon im Laufen. Du hast 5 Elemente und du zeigst 4 gleichzeitig. Das ist nicht das, wonach ich suche. –

Slick: Wie wiederhole ich unendlich?

Antwort

Verwandte Themen