Question

我正在使用外部库 - SwipeJS - 用于触摸图片幻灯片，只有在我调整浏览器窗口大小时它才能正常工作。

我在扫描容器中有我的图像，就像在体内一样：

<div id='mySwipe' style='max-width: 500px; margin: 0 auto' class='swipe'>
<div class='swipe-wrap'>
<div>
    <img src="css/images/image4.jpg" width="100%" />
</div>
<div>
    <img src="css/images/image2.jpg" width="100%" />
</div>
<div>
    <img src="css/images/image3.jpg" width="100%" />
</div>
</div>
</div>

而且，我正在正文末尾加载滑动脚本以确保文档准备就绪 - 正如图书馆作者所建议的那样。该库已加载到<head>容器中。

<script>
    var elem = document.getElementById('mySwipe');
    window.mySwipe = Swipe(elem, {
        startSlide : 1,
        auto : 3000,
        continuous : true
    });
</script>

我已尝试检查文档是否已准备好$(document).ready(function() { }，但该解决方案也无效。

Answer 1

您是否尝试过使用小部件默认示例而仅仅是您的小调整？

<script>
    var slider = Swipe( document.getElementById('mySwipe'), {
        startSlide: 1,
        auto: 3000,
        continuous: true,
        disableScroll: false,
        stopPropagation: false,
        callback: function(index, elem) {},
        transitionEnd: function(index, elem) {}
    } );
</script>

JS脚本仅在窗口大小调整后应用

1 个答案: