vue-awesome-swiper的基本使用

水深无声 2022-12-24 02:59 117阅读 0赞

## 安装 ##

*  [安装地址：https://www.npmjs.com/package/vue-awesome-swiper][https_www.npmjs.com_package_vue-awesome-swiper]

## 引入 ##

import {  swiper, swiperSlide } from "vue-awesome-swiper";
    import "../../../node_modules/swiper/css/swiper.css";

## 注册组件 ##

components: { 
        swiper,
        swiperSlide
    },

## 组件使用 ##

## 配置项 ##

swiperOptions4: { 
    	pagination: { 
            el: '.swiper-pagination',
            clickable: true,
        },
        slidesPerView: 2, // 一行显示slider的个数
        slidesPerGroup: 2, // 定义slides的数量多少为一组
        loop: true, // 循环模式选项
        autoplay: { 
            delay: 3000
        }, // 自动播放
        speed: 2000, // 切换速度
        effect: "slide", // 动画 fade cube slide coverflow flip
        navigation: { 
            nextEl: '.swiper-button-next2',
            prevEl: '.swiper-button-prev2',
        }
    },

## 样式修改 ##

/deep/ .swiper-pagination-bullet-active {
     background-color: #fff !important;
    }
    
    /deep/ .swiper-pagination-bullet {
        width: 16px;
        height: 4px;
        border-radius: 5px;
        background: var(--swiper-pagination-color, var(--swiper-theme-color));
    }
    
    /deep/ .swiper-pagination-bullets {
        bottom: 5px;
    }

## 开启和关闭轮播 ##

switchChange (e) { 
        this.flag= e;
        this.$nextTick(() => { 
            if (e) { 
                this.$refs.mySwiper1.swiper.autoplay.start();
                this.$refs.mySwiper2.swiper.autoplay.start()
            } else { 
                this.$refs.mySwiper1.swiper.autoplay.stop();
                this.$refs.mySwiper2.swiper.autoplay.stop();
            }
        })
    }

## 效果图 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70 1]

[https_www.npmjs.com_package_vue-awesome-swiper]: https://www.npmjs.com/package/vue-awesome-swiper
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70]: /images/20221120/3f3f6c3459df4af4bbb27ab203917aa3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201208144003398.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw==,size_16,color_FFFFFF,t_70