14

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

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() );
});
4

6 に答える 6

22

ドキュメントページから：

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 );
});
于 2014-06-04T16:04:48.773 に答える
8

v3.0.x バージョンの時点で、これは API に組み込まれています。

設定で初期化するだけslideToClickedSlide:trueです。(デフォルトは false)

それでおしまい！

于 2016-04-13T15:02:29.510 に答える
8

アーメドの答えに基づいて構築するには、次を実装します。

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
});
于 2015-01-21T23:02:14.757 に答える