vue-cli 使用swiper实现轮播图效果

最新推荐文章于 2022-09-15 22:35:54 发布

uyiub

最新推荐文章于 2022-09-15 22:35:54 发布

阅读量790

点赞数 2

文章标签： vue

本文链接：https://blog.csdn.net/uyiub/article/details/113381655

版权

1.引入swiper组件
注意npm和cnpm不要混用

cnpm i swiper@5.4.5 -S

2.在main.js中引入模块

import 'swiper/css/swiper.css'
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)

3.html代码展示

<template>
  <div>
     <swiper :options="swiperOption">
        <swiper-slide v-for="(slide, index) in swiperList" :key="index" >
            <div align="center"><img :src="slide" alt=""></div>
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
export default {
    name:'work',
    components: {
        Swiper,
        SwiperSlide
    },
    data(){
        return {
            swiperList :[
                'https://s3.ax1x.com/2021/01/28/yCkUP0.jpg',
                'https://s3.ax1x.com/2021/01/28/yCAQF1.jpg',
                'https://s3.ax1x.com/2021/01/28/yCAjt1.jpg'
            ],
            swiperOption: {
                autoplay:true,
                initialSlide: 0,
                loop: true,
                pagination: { el: '.swiper-pagination' },
                paginationClickable: true,
                onSlideChangeEnd: swiper => {
                console.log('onSlideChangeEnd', swiper.realIndex)
                }
            }
        }
    }
}
</script>

<style>
img{
    width: 360px;
    height: 175px;
}
</style>