web-dev-qa-db-ja.com

スライドが1つだけの場合はスワイパースライダーを無効にする

サイトでスワイパースライダーを使用していて、スライドが1つしかない場合は、それを無効にしたいのですが。

現在、スライドが1つしかない場合は、ページ付けが表示され、クリックまたはスワイプできます。理想的には、スライドが1つしかない場合は何も操作しないでください。

私の現在のjsは：

  var swiper = new Swiper('.swiper-container', {
    // Optional parameters
    direction: 'horizontal',
    loop: false,
    //autoplay: 6500,
    autoplayDisableOnInteraction: false,

    keyboardControl: true,
    mousewheelControl: true,

    pagination: '.swiper-pagination',
    paginationClickable: true,

  });
swiper
9
CreateSean

私もそうする方法を探していましたが、スワイプを無効にしてポケットベルを非表示にする「公式の」方法が見つからなかったので、少し即興することにしました。

したがって、スクリプトで、これをSwiper変数の後に追加できます。

JS：

if($(".slider .slide").length == 1) {
    $('.swiper-wrapper').addClass( "disabled" );
    $('.swiper-pagination').addClass( "disabled" );
}

これにより、スライダーにスライドが1つしかない場合は、クラスdisabledがラッパーとページネーションに追加されます。これで、CSSを追加してSwiper効果をバイパスできます。

CSS：

.swiper-wrapper.disabled {
    transform: translate3d(0px, 0, 0) !important;
}
.swiper-pagination.disabled {
    display: none;
}

これは、ループがfalseに設定されている場合にのみ機能することに注意してください（あなたの場合のように）。ループがアクティブな場合、Swiperは、唯一のスライドの前後にスライドの複製を追加し、合計3つの同一のスライドを作成します。その後、length == 1からlength == 3。

これが役立つことを願っています！

8
JoeMecPak

Swiper APIには便利なオプションがあります。

watchOverflow (boolean|false)
// When enabled Swiper will be disabled and hide navigation buttons on case there are not enough slides for sliding
9
Flo Develop

オプションの1つは、以下のように条件付きでオプションを追加することです。

    let options = {};

    if ( $(".swiper-container .swiper-slide").length == 1 ) {
        options = {
            direction: 'horizontal',
            loop: false,
            autoplayDisableOnInteraction: false,

            keyboardControl: true,
            mousewheelControl: true,

            pagination: '.swiper-pagination',
            paginationClickable: true,
        }
    } else {
        options = {
            loop: false,
            autoplay: false,
        }
    }

    var swiper = new Swiper('.swiper-container', options);
4
Afron Orana

条件を追加するだけです：

if ($('.swiper-container .swiper-slide').length > 1) {
  var swiper = new Swiper('.swiper-container', {
    // Optional parameters
    direction: 'horizontal',
    loop: false,
    //autoplay: 6500,
    autoplayDisableOnInteraction: false,

    keyboardControl: true,
    mousewheelControl: true,

    pagination: '.swiper-pagination',
    paginationClickable: true,

  });
}
2
Samuel De Backer

取得したスライドの数を確認してください。

const numberOfSlides = document.querySelectorAll('.swiper-slide').length;

次に、スライドが1つだけの場合は、allowSlidePrev/allowSlideNext（または禁止するもの）をfalseに設定します。

const slider = new Swiper('.swiper-container', {

    allowSlidePrev:numberOfSlides === 1 ? false:true,
    allowSlideNext:numberOfSlides === 1 ? false:true

});

また、スライドのコレクションにアクセスできるので、イベントでこれらのアイテムのオン/オフを切り替えることもできます。たとえば、初期化：

on: {
    init: function () {
        const numberOfSlides = this.slides.length;
        ...
    }
}
1
William Åström

私はこのような新しいオプションで更新スワイパー機能を使用することを提案します：

params.loop = false;
params.pagination = null;
swiper.update();

Paramsは、スワイパーの初期化で使用されたオブジェクトです。

ありがとう！

0
Max Abakumov

$ ionicSlidesをうまく使用すると、配列の長さを確認できます。1つ以下の場合は、Swiperインスタンスを取得してこれらの関数を呼び出します。

 $scope.$on("$ionicSlides.sliderInitialized", function (event, data) { 
    $scope.slider2 = data.slider;
      $scope.slider2.activeIndex = 0;

     if (vm.slidetext && vm.slidetext.length <= 1) {

        $scope.slider2.destroyLoop();
        $scope.slider2.stopAutoplay();
        $scope.slider2.lockSwipes();
      } 
}

ただし、これらの関数はネイティブのSwiper用であるため、正常に機能するはずです。

0
pabloRN