0

iDangerous Swiper の複数のインスタンスを単一ページの jquery モバイル サイトに追加しようとしています。Ajax を使用してページを変更すると、スワイパーのページネーションと順序が狂ってしまうようです。また、アイテム数を追跡できなくなっているようです。たとえば、スワイパーに 6 つの div があるとします。別のページに変更して戻ると、ページネーションには 8 つの項目が表示されます。

デフォルトではスワイパーはまったく機能しませんが、各「data-role = 'page'」要素の後にこれを追加することでハックを見つけることができました：

<script>
        $("#pagename").on('pageshow', function(){
            $('#pagename .swiper-container').each(function(){
                var swiper = new Swiper('.swiper-one', {pagination : '.pagination-one', createPagination: true  ,loop:true, grabCursor: true});
            });
        });
</script>

どうすればこれを機能させることができますか? 1 ページの jquery サイトに 6 つの異なるスワイパーが必要です。

ページ遷移後に何らかのリフレッシュを行う必要があると思います。Swiper の他のすべてのインスタンスを削除するもの。

何か案は？

4

3 に答える 3

4

次のコードを試してみてください。役に立つかもしれません......

<div class="swiper-container s1">
  ...
</div>
<div class="swiper-container s2">
  ...
</div>
<div class="swiper-container s3">
  ...
</div>

スクリプトで..

<script>
    var swiper1 = new Swiper('.s1', { /* Options here */ })
    var swiper2 = new Swiper('.s2', { /* Options here */ })
    var swiper3 = new Swiper('.s3', { /* Options here */ })
 </script>
于 2014-04-03T12:59:23.730 に答える