0

我正在尝试在单页 jquery 移动网站上添加 iDangerous Swiper 的多个实例。似乎在使用 Ajax 更改页面后，swiper 的分页和顺序会失控。它似乎也忘记了项目计数。因此，假设 swiper 中有 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>

我怎样才能得到这个工作？我需要 6 个不同的 swipers 在单页 jquery 网站上。

我想我需要在页面转换后进行某种刷新。将删除所有其他 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 回答
2

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

var swiper = new Swiper($(this)[0], {
    pagination : '.pagination-one', 
    createPagination: true,
    loop:true, 
    grabCursor: true});
});
于 2013-09-30T16:22:14.990 回答
0

从 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>
于 2016-07-06T08:14:55.320 回答