web-dev-qa-db-ja.com

iDangerous Swiperで特定のスライドに移動する

カスタムメニューがある場合。

Swiper.jsでいつでも特定のスライドに移動するにはどうすればよいですか？

<div class="menu">
    <ul>
    <li class="slide-3">go to slide 3</li>
    <li class="slide-5">go to slide 5</li>
    <li class="slide-1">go to slide 1</li>
    </ul>
</div>

私はこのようなことを試しましたが、うまくいきません：

$('.slide-3').click(function(e) {
    e.preventDefault();
    $(".menu .active").removeClass('active');
    $(this).addClass('active');
    swipeTo( $('.pag2').index() );
});
jqueryswiper
13
user2654675

documentation ページから：

mySwiper.slideTo(index, speed, runCallbacks);

「速度」パラメータに等しい速度の「インデックス」パラメータに等しいインデックス番号でスライドへの移行を実行します。 'runCallbacks'をfalse（デフォルトでは 'true'）に設定すると、遷移はonSlideChangeコールバック関数を生成しません。

したがって、あなたのケースでは、例えば変数を最初に宣言する必要があります：

var mySwiper = new Swiper('.swiper-container',{
    mode:'horizontal',
    loop: false
});

その後：

$('.slide-3').click(function(e) {
    e.preventDefault();
    $(".menu .active").removeClass('active');
    $(this).addClass('active');
    mySwiper.slideTo( $('.pag2').index(),1000,false );
});
19
cor

V3.0.xバージョン以降、これはAPIに組み込まれています。

設定でslideToClickedSlide:trueを使用して初期化するだけです。 （デフォルトはfalse）

それでおしまい！

8
mix3d

アーメドの答えに基づいて、実装するには：

var moveToClickedNumber = function(swiper){swiper.swipeTo(swiper.clickedSlideIndex)}

var mySwiper = new Swiper('.swiper-container',{
    mode:'horizontal',
    loop: false,
    onSlideClick: moveToClickedNumber,
    initialSlide: 0, //slide number which you want to show-- 0 by default
});
8
DrewB

組み込みのコールバックを使用する

http://www.idangero.us/sliders/swiper/api.php

mySwiper.clickedSlideIndex-タッチ/クリックされたスライドのインデックス番号を返します。 「onSlideTouch」および「onSlideClick」コールバックでのみ使用します。

mySwiper.clickedSlide-タッチ/クリックされたスライド（スライドインスタンス、HTMLElement）を返します。 「onSlideTouch」および「onSlideClick」コールバックでのみ使用します。

0
Ahmed Abdelrazik
 function goToPage(numberPage){
  new Swiper('.swiper-container').slideTo(numberPage,1000,false)
}


goToPage(10);
0
HSN KH