0

我想启用触摸设备的滑动器来更改我的画廊上的图片：

画廊标记是这样的：

<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

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

在这个小提琴中，我什至得到了一个不同的错误..

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

4

1 回答 1

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 init 之前通过脚本对其进行转换，例如：

$('.gallery').addClass('swiper-container');
$('.gallery').wrapInner('<div class="swiper-wrapper"></div>');
$('.gallery a').wrap('<div class="swiper-slide"></div>');
于 2014-08-11T13:35:59.627 回答