Question

我正在尝试在单页jquery移动网站上添加iDangerous Swiper的多个实例。似乎在使用Ajax更改页面之后，swiper的分页和顺序就会失败。它似乎也失去了项目计数的踪迹。所以，说在swiper中有6个div，你换到另一个页面并返回，分页将显示8个项目。

默认情况下，swiper根本不起作用，但我设法通过在每个＆＃34; data-role =＆＃39;页面＆＃39;＆＃34;＆＃34;元素：

<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>

我怎样才能使这个工作？我需要在单页jquery站点上安装6个不同的swipers。

我认为我需要在页面转换后进行某种刷新。将删除Swiper的所有其他实例的东西。

任何想法？

Answer 1

请尝试以下代码，它可能会对您有所帮助......

<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>

Answer 2

你必须将对象传递给构造函数，如下所示：

var swiper = new Swiper($(this)[0], {
    pagination : '.pagination-one', 
    createPagination: true,
    loop:true, 
    grabCursor: true});
});

Answer 3

在swiper版本3.3.1中，下载的zip中有一个演示。它被称为24-multiple-swipers.html。

<div class="swiper-container swiper1">
...
...
<div class="swiper-container swiper2">
...
...
<div class="swiper-container swiper3">
...
...

和JS：

<script>
var swiper1 = new Swiper('.swiper1', {
    pagination: '.swiper-pagination1',
    paginationClickable: true,
    spaceBetween: 30,
});
var swiper2 = new Swiper('.swiper2', {
    pagination: '.swiper-pagination2',
    paginationClickable: true,
    spaceBetween: 30,
});
var swiper3 = new Swiper('.swiper3', {
    pagination: '.swiper-pagination3',
    paginationClickable: true,
    spaceBetween: 30,
});
</script>

iDangerous Swiper - 多个实例

3 个答案: