解决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;  
}; 
  • 1
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要使用Nuxt和vue-awesome-swiper来实现带略图控制的滑动器,可以按照以下步骤: 1. 安装vue-awesome-swiperswiper: ```bash npm install --save vue-awesome-swiper swiper ``` 2. 在nuxt.config.js中添加以下内容来引入所需的CSS文件和插件: ```javascript module.exports = { css: [ 'swiper/css/swiper.css' ], plugins: [ { src: '@/plugins/vue-awesome-swiper', ssr: false } ] } ``` 3. 创建一个新的Vue组件,例如`Slider.vue`,并在其中使用vue-awesome-swiper: ```html <template> <div class="slider-container"> <swiper :options="swiperOptions"> <swiper-slide v-for="(slide, index) in slides" :key="index"> <img :src="slide.image" /> </swiper-slide> <div class="swiper-pagination" slot="pagination"></div> <div class="swiper-button-prev" slot="button-prev"></div> <div class="swiper-button-next" slot="button-next"></div> <swiper-thumbs :swiper="swiper" :slides-per-view="5" :watch-active-index="true" class="thumbs"></swiper-thumbs> </swiper> </div> </template> <script> import { Swiper, SwiperSlide, SwiperThumbs } from 'vue-awesome-swiper' export default { components: { Swiper, SwiperSlide, SwiperThumbs }, data() { return { slides: [ { image: 'https://picsum.photos/id/1018/800/600' }, { image: 'https://picsum.photos/id/1015/800/600' }, { image: 'https://picsum.photos/id/1019/800/600' }, { image: 'https://picsum.photos/id/1016/800/600' }, { image: 'https://picsum.photos/id/1020/800/600' } ], swiperOptions: { pagination: { el: '.swiper-pagination' }, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' }, thumbs: { swiper: { slidesPerView: 5, watchSlidesVisibility: true, watchSlidesProgress: true }, slideThumbActiveClass: 'thumb-active', slideThumbClass: 'thumb' } } } } } </script> <style scoped> .thumb { opacity: 0.5; transition: opacity 0.2s ease-in-out; } .thumb-active { opacity: 1; } </style> ``` 在这个例子中,我们首先导入了`Swiper`、`SwiperSlide`和`SwiperThumbs`组件,然后定义了一个`slides`数组来存储我们要展示的图片。接下来,我们创建了一个名为`swiperOptions`的对象来配置我们的滑动器,包括分页、导航和略图等选项。最后,我们将这些选项传递给`<swiper>`组件和`<swiper-thumbs>`组件,并使用`v-for`指令在`<swiper-slide>`中动态渲染图片。 请注意,在这个例子中,我们还使用了一些自定义CSS类来定义略图的样式。如果需要,您可以根据自己的需求进行修改。 希望这可以帮助您实现一个带略图控制的滑动器!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值