swiper插件的pagination不起作用

Question

各位大牛，我用swiper的pagination，能显示几个圆点，但是点击圆点并不能实现翻页效果。代码如下，求各位指点迷津，多谢啦！

<!-- Swiper -->

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

<!-- Add Pagination -->

<!-- Initialize Swiper -->
<script type="text/javascript">
    $(document).ready(function(){
        var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        });
    });
</script>

效果如下，忽略css设置

Answer 1

以下回答参考 皆我百晓生、券券喵儿 等免费微信小程序相关内容作答，并由本人整理回复。

你提供的代码似乎没有正确配置Swiper插件的pagination属性。在Swiper插件中，你需要使用slideTo方法来控制轮播图片的切换。

你应该这样修改你的代码：

<!-- Initialize Swiper -->
<script type="text/javascript">
    $(document).ready(function(){
        var swiper = new Swiper('.swiper-container', {
            pagination: '.swiper-pagination',
            paginationClickable: true,
            slideToClickedSlide: true, // 添加这个参数以启用滑块切换到点击的滑块
            loop: false, // 设置循环模式为False，以便每次滚动都会重新开始
        });
    });
</script>

<!-- Add CSS for pagination -->
<style>
    .swiper-pagination-bullet-active { background-color: red; }
</style>

然后，在CSS中添加以下样式：

.swiper-pagination-bullet-active {
    background-color: red;
}

现在你应该能看到圆点并可以进行翻页了。