Vue2.5学习笔记（六）使用vue-awesome-swiper插件实现轮播图

最新推荐文章于 2024-09-09 10:21:14 发布

Zijeak

最新推荐文章于 2024-09-09 10:21:14 发布

阅读量250

点赞数

分类专栏：前端文章标签： javascript vue swiper

本文链接：https://blog.csdn.net/qq_18404993/article/details/108542239

版权

前端专栏收录该内容

53 篇文章 1 订阅

订阅专栏

1.安装

插件地址：https://github.com/surmon-china/vue-awesome-swiper

 npm install swiper vue-awesome-swiper@2.6.7 --save

2.引入并全局挂载

import VueAwesomeSwiper from 'vue-awesome-swiper'
// If you use Swiper 6.0.0 or higher
import 'swiper/swiper-bundle.css'

Vue.use(VueAwesomeSwiper)

3.新建组件文件并使用

<template>
    <div class="wrapper">
        <swiper ref="mySwiper" :options="swiperOption">
            <swiper-slide v-for="item of swiperList" :key="item.id">
                <div class="swiper-img">
                    <img :src="item.imgUrl">
                </div>
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
    </div>
</template>

<script>
export default {
    name:'HomeSwiper',
    data:function(){
        return{
            swiperOption:{
                pagination: {
                    el: '.swiper-pagination'
                },
                loop:true
            },
            swiperList:[
                {
                    id:"001",
                    imgUrl:"https://imgs.qunarzz.com/vc/e3/a1/71/f498dfd3bed948d623c9093252.jpg_92.jpg"
                },
                {
                    id:"002",
                    imgUrl:"https://imgs.qunarzz.com/vs_ceph_vcimg/c0a60fa20379efa4f02ce527a680dc1b.jpeg"
                }
            ]
        }
    }
}
</script>

<style lang="scss" scoped>
.wrapper{
    width:100%;
    height: 0;
    padding-bottom: 30.474%;
    background-color: #ccc;
    overflow: hidden;
}
.swiper-img{
    width:100%;
}
.swiper-img img{
    width: 100%;
}
</style>