web-dev-qa-db-fra.com

Ajout du bouton précédent suivant sur le carrousel lisse

Récemment, j'ai ajouté Slick carrousel sur mon projet.

En lisant ce document, j'ai vu qu'il existe une méthode slick Prev() et slick Next().

Mais je vous demande comment utiliser cette méthode. J'ai essayé pendant longtemps, mais en fait je ne comprends pas comment l'utiliser avec html button.

$('button.next').click(function() {
    $(this).slickPrev();
});

J'ai essayé de cette façon.

jquerycarouselslick.js
8
Rasel mahmud
$('button.next').click(function(){
    $("#yourid").slickPrev();
});

Essayez de remplacer this par "#yourid" où yourid est l'id du curseur.

A partir de la version 1.4, utilisez:

$('button.next').click(function(){
    $("#yourid").slick('slickPrev');
});
20
Anima-t3d

La meilleure façon que j’ai trouvée de faire cela est la suivante. Vous pouvez supprimer mon code HTML et y placer le vôtre.

$('.home-banner-slider').slick({
    dots: false,
    infinite: true,
    autoplay: true,
    autoplaySpeed: 3000,
    speed: 300,
    slidesToScroll: 1,
    arrows: true,
    prevArrow: '<div class="slick-prev"><i class="fa fa-angle-left" aria-hidden="true"></i></div>',
    nextArrow: '<div class="slick-next"><i class="fa fa-angle-right" aria-hidden="true"></i></div>'
});
3
Delorme Grant

Le mien est le même que ci-dessus mais peut-être un peu différent, et je pense qu'il vaut mieux comprendre:

$('.responsive').slick({
   dots: true,
   prevArrow: $('.prev'),
   nextArrow: $('.next'),
   infinite: false,
   speed: 300,
   slidesToShow: 3,
   slidesToScroll: 1,
   autoplay: true,
   autoplaySpeed: 5000,

});

<div class="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
</div>
<div class="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
</div>
2
Ilimkan Omurzakova

Vous pouvez faire la même chose si la fonction slickPrev ne fonctionne pas. Vous pouvez passer le nom de la fonction en paramètre à slick.

$('.next').click(function(){
    $("#sliderId").slick('slickNext');
});
2
Sandeep Gupta
    $("selector").slick({
        nextArrow: '<button type="button" class="btn btn-primary">prev</button>',
        prevArrow: '<button type="button" class="btn btn-primary">next</button>'
    });

J'ai ajouté le bouton bootstrap, vous pouvez également ajouter des images ou des icônes.

nextArrow - Next Permet de sélectionner un nœud ou de personnaliser le code HTML de la flèche "Suivant" . prevArrow - Previous Permet de sélectionner un nœud ou de personnaliser le code HTML de la flèche "Précédent". .

vous pouvez trouver les propriétés nextArrow et prevArrow json ci-dessus sous l'objet json _.defaults dans le fichier slick.js non minifié.

1
Salike Hassan
  1. Initialisez votre curseur dans votre fichier de script et ajoutez les paramètres que vous voulez comme ceci:

$('.my-slider').slick({
    arrows: true,
    prevArrow: '<div class="slick-prev"><</div>',
    nextArrow: '<div class="slick-next">></div>'
});

  1. Style les classes slick-prev et slick-next
0
Andre Nimczick