swiper插件：swiper4+版本在页面显示的bug以及解决办法

最新推荐文章于 2022-08-09 23:25:15 发布

wgzero

最新推荐文章于 2022-08-09 23:25:15 发布

阅读量2.4k

点赞数

分类专栏：前端文章标签：前端 swiper插件

本文链接：https://blog.youkuaiyun.com/qq_37674347/article/details/94592051

版权

本文主要介绍了在使用swiper4+版本时遇到的三个问题：页面显示蓝色边框、swiper-slide轮播效果失效和pagination（分页器）显示及交互问题。针对这些问题，提供了对应的解决方案，包括禁用元素边框、启用observer选项以及自定义并绑定pagination的点击事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.出现蓝色边框：

解决办法： *{outline: none};

2.swiper-slide失效了，只能显示一排图片，没有产生轮播效果：

解决办法：加上以下这两句话：

observer: true,//修改swiper自己或子元素时，自动初始化swiper

observeParents: true,//修改swiper的父元素时，自动初始化swiper,

3.swiper插件的pagination在页面上显示不了，那就自定义pagination（分页器）：

加上以下代码：以下代码是自定义pagination

pagination: {
            el: "#c6-kv-pagination",//分页器名字
            clickable: true,
            type: 'custom',//在html定义类
            renderCustom: function (swiper, current, total) {
                var customPaginationHtml = "";
                for (var i = 0; i < total; i++) {
                    //判断哪个分页器此刻应该被激活
                    if (i == (current - 1)) {
                        customPaginationHtml += '<span class="swiper-pagination-custom

最低0.47元/天解锁文章