Question

我在我的应用程序中使用iDangerous swiper

我的主页上有三张图片。

我想每隔3秒自动播放一次图像。

   <div class="wrapper">
    <div class="swiper-container" style="background: #CCCCCC">
        <div class="swiper-wrapper">

            <div class="swiper-slide tips_content2">
                <ul>
                    <li><img src="1.jpg"></img><span class="image1">Image 1</span></li>
                </ul>
            </div>
            <div class="swiper-slide tips_content1">
                <ul>
                   <li><img src="2.jpg"></img><span class="image2">Image 2</span></li>
                </ul>
            </div>
            <div class="swiper-slide tips_content">
                <ul>
                <li><img src="3.jpg"></img><span class="image3">Image3</span></li>
                </ul>
            </div>
            </div>
        <div class="pagination"></div>
    </div>

</div>
<script>
var mySwiper = new Swiper('.swiper-container', { 
    mode: 'horizontal',
    pagination: '.pagination',
   loop:true,
    paginationClickable: true,
    autoplay:3000,
    freeMode:true,
    paginationElement:'div',
    onSlideNext :function(swiper){
    $('.swiper-active-switch').css('background-color', '#fff');
}
});
</script>

图像每3秒钟更换一次。但是在分页div中，有五个点显示而不是三个点。

此外，分页中的活动画笔没有得到适当的切换。

请建议。

先谢谢

Answer 1

我相信这可能是因为你在分页div中有5个span元素，你可以尝试从分页div中删除两个span元素。

在iDangerous swiper中自动播放

1 个答案: