解决Swiper4(缩略图控制 / 无限循环)缩略图小于4张出错解决方法

#这段代码和官方案例有3处修改,Swiper4版本

#1、做了页面上是否有“swiper-container”的判断,目的防止页面上没有类名出现js报错。

#2、定义了“num”变量,目的给loopedSlides传动态值,这样改变swiper-slide的数量时不用再去修改它。

#3、判断了swiper-slide的数量是否大于3个,并给缩略图中的swiper都加进centeredSlides: true值,目的解决swiper上小于3张图片时出现一系列的问题。

if ($('.swiper-container').length > 0) {  
    var num = $('.gallery-top').find('.swiper-slide').length;  
    if (num > 3) {  
        var galleryTop = new Swiper('.gallery-top', {  
            loop: true,  
            loopedSlides: num,  
            navigation: {  
                nextEl: '.swiper-button-next',  
                prevEl: '.swiper-button-prev',  
            },  
        });  
        var galleryThumbs = new Swiper('.gallery-thumbs', {  
            slidesPerView: 5,  
            loop: true,  
            loopedSlides: num,  
            centeredSlides: true,  
            slideToClickedSlide: true,  
        });  
    } else {  
        var galleryTop = new Swiper('.gallery-top', {  
            navigation: {  
                nextEl: '.swiper-button-next',  
                prevEl: '.swiper-button-prev',  
            },  
        });  
        var galleryThumbs = new Swiper('.gallery-thumbs', {  
            centeredSlides: true,  
            slidesPerView: 'auto',  
            slideToClickedSlide: true,  
        });  
    }  
    galleryTop.controller.control = galleryThumbs;  
    galleryThumbs.controller.control = galleryTop;  
}; 
### 集成 Swiper 4 并实现缩略图效果 #### 安装依赖包 为了在 Vue2 项目中集成 Swiper 4 和实现缩略图功能,需先安装 `vue-awesome-swiper` 的特定版本。 ```bash npm install vue-awesome-swiper@3.1.3 ``` 此命令会下载兼容 Vue2 版本的 `vue-awesome-swiper` 插件[^1]。 #### 全局注册组件 接着,在项目的入口文件 `main.js` 中全局引入并配置该插件: ```javascript import Vue from 'vue'; import App from './App.vue'; // 引入 vue-awesome-swiper 组件库及其样式表 import VueAwesomeSwiper from 'vue-awesome-swiper'; import 'swiper/dist/css/swiper.css'; Vue.config.productionTip = false; // 使用插件 Vue.use(VueAwesomeSwiper); new Vue({ render: h => h(App), }).$mount('#app'); ``` 上述代码完成了对 `vue-awesome-swiper` 的初始化设置。 #### 缩略图功能的具体应用 最后一步是在页面模板内编写具体的 swiper 组件实例来展示图片轮播以及对应的缩略图导航栏。下面是一个完整的 HTML 结构例子: ```html <template> <div class="swiper-container"> <!-- 主轮播区 --> <swiper :options="swiperOptionTop" class="gallery-top" ref="swiperTop"> <swiper-slide v-for="(slide, index) in slides" :key="index"><img :src="slide.img"></swiper-slide> <div class="swiper-button-next swiper-button-white" slot="button-next"></div> <div class="swiper-button-prev swiper-button-white" slot="button-prev"></div> </swiper> <!-- 缩略图导航区 --> <swiper :options="swiperOptionThumbs" class="gallery-thumbs" ref="swiperThumbs"> <swiper-slide v-for="(slide, index) in slides" :key="index"><img :src="slide.img"></swiper-slide> </swiper> </div> </template> <script> export default { data() { return { slides: [ { img: '/path/to/image.jpg' }, // 更多幻灯片项... ], swiperOptionTop: { spaceBetween: 10, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' } }, swiperOptionThumbs: { spaceBetween: 10, centeredSlides: true, slidesPerView: 'auto', touchRatio: 0.2, slideToClickedSlide: true } }; }, mounted() { this.$nextTick(() => { const swiperTop = this.$refs.swiperTop.$swiper; const swiperThumbs = this.$refs.swiperThumbs.$swiper; swiperTop.controller.control = swiperThumbs; swiperThumbs.controller.control = swiperTop; }); } }; </script> ``` 这段脚本定义了一个包含两个 swiper 实例的布局——一个是用于显示大图的主要区域;另一个则是作为辅助的小图列表,用来控制主要区域的内容切换。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

今天也要暴富啊

感谢老铁们的打赏!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值