web-dev-qa-db-ja.com

最初のスライドで前のコントロールを無効にし、最後のスライドで次のコントロールを無効にします

slickを使用して、ユーザーが次の矢印をクリックするまでprevコントロールを無効にして非表示にする方法を探します。同様に、ユーザーが最後のスライドに到達したら、Nextコントロールを無効にして非表示にします。

私が達成しようとしていることの良い例は、 ここ

スリックには、私が見落としているこの属性がすでにありますか？これは、無効なクラスを追加することでCSSを使用して達成できる可能性がありますか？

私が見つけた同様の唯一のものはこれです

$('.pages .slider').slick({
    autoplay: true,
    autoplaySpeed: 5000,
    infinite: false,
    onAfterChange: function(slide, index) {
        if(index == 4){
        $('.pages .slider').slickPause();

しかし、それはまさに私が探しているものではありません。

javascriptjqueryslick.js
12
gwar9

解決

ボタンにcss _pointer-events: none_を追加できます。そのcssプロパティは、要素のすべてのイベントを無効にします。そのようなものです。

_// Slick stuff
   ...
   onAfterChange: function(slide, index) {
       if(index === 4) {
           $('.slick-next').css('pointer-events', 'none')
       }
       else {
           $('.slick-next').css('pointer-events', 'all')
       }
   }
_

また、_.slick-prev_要素の同じガイドライン上の何か。

その解決策では、configからの関数を取得し、このようなものを使用して参照するだけにしてください。

_// Inside slick config
onAfterChange: afterChange

// Below somewhere
var afterChange = function(slide, index) { //stuff here }
_

また、ifステートメントで_4_をハードコーディングする代わりに、スライダーの長さを取得して確認する方法があるかどうかを確認します。おそらく$('.slide').lengthのようなことができます

編集

afterChange()関数を実装する方法は次のとおりです。

_$(document).ready(function(){
    $('.scrollable').slick({
        dots: false,
        slidesToShow: 1,
        slidesToScroll: 3,
        swipeToSlide: true,
        swipe: true,
        arrows: true,
        infinite: false,
     });

     $('.scrollable').on('afterChange', function (event, slick, currentSlide) {

        if(currentSlide === 2) {
            $('.slick-next').addClass('hidden');
        }
        else {
            $('.slick-next').removeClass('hidden');
        }

        if(currentSlide === 0) {
            $('.slick-prev').addClass('hidden');
        }
        else {
            $('.slick-prev').removeClass('hidden');
        }  
    })
});
_

CSSもあります。アニメーションを行いたい場合は、ここで行う必要があります。

_.slick-prev.hidden,
.slick-next.hidden {
    opacity: 0;
    pointer-events:none;
}
_
10
Raphael Parent

Infite：falseを使用して、slick-disabledクラスのカスタムcssを作成するだけです。例えば。

JS-jQuery

$('.my-slider').slick({
    infinite: false,
    slidesToShow: 1,
    slidesToScroll: 1
});

[〜＃〜] css [〜＃〜]

.slick-disabled {
    opacity: 0;
    pointer-events:none;
}
23
Jefferson Vasconcelos

最初または最後の項目に到達した場合、前/次ボタンをスタイルする簡単な方法があります。無限モードがfalseに設定されていることを確認してください。次に、ボタンのスタイルを次のようにします。

.slick-arrow[aria-disabled="true"]{
        opacity: .5;
}

必要なのはそれだけです！

2
Andre Nimczick

CSSコードを追加します。

.slick-disabled {
    display: none !important;
}
2
user10652642

非常に簡単な解決策は次のとおりです。

  1. 無限をfalseに設定します。例えば

    $('.my-slider').slick({
 infinite: false });

  2. 次のcssを追加します

    .slick-disabled { display: none; pointer-events:none; }

それだけです。

1
York Wang

Slick.jsの動作を次のように直接変更しました。

_// making the prevArrow not show on init:
if (_.options.infinite !== true) {
    _.$prevArrow
    .addClass('slick-disabled')
    .attr('aria-disabled', 'true')
    .css('display', 'none'); // The new line of code!
}
_

そして：

_if (_.options.arrows === true &&
    _.slideCount > _.options.slidesToShow &&
    !_.options.infinite
) {
    _.$prevArrow.removeClass('slick-disabled').attr('aria-disabled', 'false').css('display', '');
    _.$nextArrow.removeClass('slick-disabled').attr('aria-disabled', 'false').css('display', '');

    if (_.currentSlide === 0) {
        _.$prevArrow.addClass('slick-disabled').attr('aria-disabled', 'true').css('display', 'none');
        _.$nextArrow.removeClass('slick-disabled').attr('aria-disabled', 'false').css('display', '');
    } else if (_.currentSlide >= _.slideCount - _.options.slidesToShow && _.options.centerMode === false) {
        _.$nextArrow.addClass('slick-disabled').attr('aria-disabled', 'true').css('display', 'none');
        _.$prevArrow.removeClass('slick-disabled').attr('aria-disabled', 'false').css('display', '');
    } else if (_.currentSlide >= _.slideCount - 1 && _.options.centerMode === true) {
        _.$nextArrow.addClass('slick-disabled').attr('aria-disabled', 'true').css('display', 'none');
        _.$prevArrow.removeClass('slick-disabled').attr('aria-disabled', 'false').css('display', '');
    }
}
_

Jquery .css()メソッドを使用してdisplayを設定するだけです。かなり巧妙に動作するようです。

0
MrBoJangles

もう1つの方法は、最初のスライドをスワイプ（前）するか、最後のスライドをスワイプ（次）するときに同じスライドにスライドすることです。スワイパーメソッドswiper.SlideTo（n、n、m）;を使用します。

0
user7824557