Question

我目前遇到了idangerous swiper的问题。我使用以下顺序包含的库：

jQuery 1.9.1
jQuery Mobile 1.4.5
Idangerous Swiper（jQuery）3.0.6

在通过javascript将swiper添加到DOM之前，我正在修改它以满足我的需求。

最后生成html代码，该代码应符合api：

的需要

<div class="tx-cctest-pi1">
        <div class="cctest-gallery-link" id="pageId-13">
            <div class="swiper-13 swiper-container">
               <div class="swiper-wrapper">
                  <div class="swiper-slide">
                      <img src="uploads/tx_cctest/bild1.jpg">
                  </div>
                  <div class="swiper-slide">
                      <img src="uploads/tx_cctest/bild2.jpg">
                  </div>
                  <div class="swiper-slide">
                      <img src="uploads/tx_cctest/bild3.jpg">
                  </div>
                  <div class="swiper-slide">
                      <img src="uploads/tx_cctest/bild4.jpg">
                  </div>
               </div>
            </div>
            <div class="albumName">Architektur</div>
        </div>
</div>

代码是动态生成的，应生成多个swipers（因此类名为 swiper- X ）。

将swiper添加到元素的代码如下：

new Swiper('.swiper-'+ pageId, {
    direction: 'horizontal',
    loop: true,
    preloadImages: true,
    updateOnImagesReady: true,
    grabCursor: true
});

控制台中没有错误，并且滑键不会滑动。

更新问题解决了。在enigma证明代码似乎在没有AJAX的情况下工作正常后，检查了代码。正如下面评论中提到的enigma帖子一样，问题是ajax调用甚至没有完成，但swiper已经创建了。因此，将Swiper结构放在done()的{{1}}回调中，一切正常。

Answer 1

鉴于您的问题中的代码，以及您确定页面ID正确的事实，我生成了this JSfiddle，这表明它完美无缺。错误显然不在引用的代码中。

查看评论中的codepen，有些错误很明显：

<div class="test"-gallery-link link-left" id="pageId-13">应该是 <div class="test-gallery-link link-left" id="pageId-13">，请注意已删除的"
最后还有一个不必要的</div>
在回调中，this引用Ajax调用的jqXHR object，而不是事件处理程序绑定的元素。所以$(this)可能没有按照你的想法做到。我通过硬编码网址而不是使用var url = $(this).attr('src');来修复此问题，您可以通过在输入ajax调用之前存储$(this)来修复它。

解决了这些问题之后，我将所有的codepen代码放入带有正确链接库的JSfiddle中，并删除了移动检查和ajax调用（直接跳到done()）。

通过上述更改，the JSfiddle似乎正在大致按照您的意愿进行。

Idangerous Swiper不刷

1 个答案: