javascript - jQuery 危险的 swipper 插件 : error in selector?

Question

我想启用触摸设备的滑动器来更改我的图库中的图片:

画廊标记是这样的:

<div class="gallery">
    <a href="http://localhost:8104/files/pic-spa-01.jpg" data-rel="gallery-1" style="background-image: url('http://localhost:8104/files/pic-spa-01-750x750.jpg')"></a>
    <a href="http://localhost:8104/files/pic-spa-02.jpg" data-rel="gallery-1" style="background-image: url('http://localhost:8104/files/pic-spa-02-750x750.jpg')"></a>
</div>

我正在尝试这样:

if ( Modrnizer.touch ) {
            $.getScript(base_url + "/js/idangerous.swiper-2.1.min.js?p1", function () {

                //Main Swiper
                swiper = new Swiper('.gallery', {
                    onSlideChangeStart: function(){

                    }
                });

            })
}

但我收到此错误:

未捕获类型错误:无法读取未定义的属性“childNodes”

由于我尝试过多个 .gallery 实例:

$.getScript(base_url + "js/idangerous.swiper-2.1.min.js?p1", function () {
    //Main Swiper
    swiper = new Swiper('.gallery:eq(0)', {
        onSlideChangeStart: function(){

        }
    });
})

但是错误变成了:

Uncaught TypeError: Cannot read property 'childNodes' of undefined VM1007:47

所以有人知道我做错了什么吗？

在这个 fiddle 中我什至遇到了不同的错误..

http://jsfiddle.net/9VBha/118/

Answer 1

您需要保留所需的 Swiper 的 HTML 结构:

<div class="swiper-container gallery">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><a href="http://localhost:8104/files/pic-spa-01.jpg" data-rel="gallery-1" style="background-image: url('http://localhost:8104/files/pic-spa-01-750x750.jpg')"></a></div>
    ...
  </div>
</div>

如果您无权访问 HTML，则可以在 Swiper 初始化之前通过脚本对其进行转换，例如:

$('.gallery').addClass('swiper-container');
$('.gallery').wrapInner('<div class="swiper-wrapper"></div>');
$('.gallery a').wrap('<div class="swiper-slide"></div>');