web-dev-qa-db-ja.com

スリックカルーセルに次の前のボタンを追加

最近、プロジェクトに Slick carousel を追加しました。

そこにあるドキュメントを読んで、メソッドslick Prev()とslick Next()があります。

しかし、私はこの方法をどのように使用するかをあなたに尋ねています。長い間試してみましたが、実際にhtml buttonでこれを使用する方法を理解できません。

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

私はこの方法を試しました。

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

thisを"#yourid"に変更してみてください。ここで、youridはスライダーのIDです。

バージョン1.4以降では、以下を使用します。

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

鉱山は上記と同じですが、少し異なるかもしれません。理解した方がいいと思います。

$('.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>
5
Ilimkan Omurzakova

それをするために私が見つけた最良の方法はこれです。私のHTMLを削除して、そこに置くことができます。

$('.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
    $("selector").slick({
        nextArrow: '<button type="button" class="btn btn-primary">prev</button>',
        prevArrow: '<button type="button" class="btn btn-primary">next</button>'
    });

bootstrapボタンを追加しました。画像やアイコンを追加することもできます。

nextArrow-次へノードを選択するか、「次へ」矢印のHTMLをカスタマイズできます。 prevArrow-前へノードを選択するか、「前へ」の矢印のHTMLをカスタマイズできます。

上記のnextArrowおよびprevArrow jsonプロパティは、縮小されていないslick.jsファイル内の_.defaults jsonオブジェクトの下にあります。

2
Salike Hassan

SlickPrev関数が機能しない場合も同じことができます。関数名をパラメーターとしてスリックに渡すことができます。

$('.next').click(function(){
    $("#sliderId").slick('slickNext');
});
2
Sandeep Gupta
  1. スクリプトファイルでスライダーを初期化し、次のように必要な設定を追加します。
$('.my-slider').slick({
    arrows: true,
    prevArrow: '<div class="slick-prev"><</div>',
    nextArrow: '<div class="slick-next">></div>'
});
  1. クラスslick-prevおよびslick-nextのスタイルを設定する
0
Andre Nimczick