vue中使用轮播图

配置文档：https://www.swiper.com.cn/api/effects/298.html

方法一：

一、在vue项目中安装swiper npm install swiper@5.4.5 -S

npm install vue-awesome-swiper@3.1.3 -S

二、在main.js中引入swiper.css import 'swiper/css/swiper.css'

三、在组件中使用

1、引入必要的组件 import { swiper, swiperSlide } from "vue-awesome-swiper";

2、注册子组件 components: { swiper, swiperSlide }

3、结构添加

data(){

        return{

                swiperOptions: {

                        loop: true,

                        speed: 1000,

                        autoplay: {

                                delay: 1000,

                                stopOnLastSlide: false,

                                disableOnInteraction: false,

                        },

                        effect : 'flip',

                        flipEffect: {

                                slideShadows : true,

                                limitRotation : true,

                        },

                        // 显示分页

                        pagination: {

                                el: ".swiper-pagination",

                                clickable: true, //允许分页点击跳转

                        },

                        // 设置点击箭头

                        navigation: {

                                nextEl: ".swiper-button-next",

                                prevEl: ".swiper-button-prev",

                        },

                        // 修改默认点击左右箭头样式

                        navigation: {

                                 nextEl: ".swiper-button-next",

                                 prevEl: ".swiper-button-prev",

                        },

                },

        }

}

3.html代码

<div class="wrapper">

        <swiper ref="mySwiper" v-bind:options="swiperOptions">

                <swiper-slide v-for="(item, index) in 5" v-bind:key="index"> {{item}} </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>

</div>

方法二：

一、在vue项目中安装swiper npm install swiper@5.4.5 -S

<template>
    <div style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff" class="swiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(item,index) in sceneList" :key="index">
                <img :src="item.cover" alt="">
            </div>
        </div>
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
    </div>
</template>
<script>
import Swiper from 'swiper'
import 'swiper/css/swiper.css'  //如果没有引入css就在swiper官网文档找见自己用的那个轮播图把他的css文件拷贝下来引入
var swiper;
export default {
    data(){
        return{
            sceneList:[]
        }
    },
    created(){
        
    },
    methods:{
        // 轮播图启动
        swiperFn(){
            let that = this
            swiper = new Swiper(".mySwiper", {
                spaceBetween: 10,
                slidesPerView: 3,    //显示轮播图的个数   不写默认一张图片
                navigation: {
                     nextEl: ".swiper-button-next",
                     prevEl: ".swiper-button-prev",
                },
                freeMode: true,
                watchSlidesProgress: true,
                on: {
                    slideChangeTransitionEnd: function(){
                    // alert(this.activeIndex);//切换结束时，告诉我现在是第几个slide
                    },
                },
            });
            //swiper; 
        },
    }
}
</script>