vue2 使用 swiper 轮播图效果
Posted on 2021-04-08 13:58 书中枫叶 阅读(1612) 评论(0) 编辑 收藏 举报 上次更新: 2022-03-08 17:06第一步、先安装swiper插件
npm install [email protected] --save-dev
第二步、组件内引入swiper插件
import Swiper from 'swiper' import 'swiper/dist/css/swiper.min.css'
第三步、创建模板
![复制代码](https://common.cnblogs.com/images/copycode.gif)
<template> <div class="swiper-container"> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide" v-for="item in 16"> <el-image style="width: 100%; height: 100%" :src="url" :preview-src-list="srcList" fit="fill"> </el-image> </div> </div> </div> <!-- 导航按钮 --> <div class="swiper-button-prev btn swiper-button-black"></div> <div class="swiper-button-next btn swiper-button-black"></div> </div> </template>
![复制代码](https://common.cnblogs.com/images/copycode.gif)
第四步、mounted里面创建swiper实例就大功告成
mounted () { this.swiper= new Swiper('.swiper-container', { //轮播图swiper相关属性 }) }
最后附上完整代码:
![复制代码](https://common.cnblogs.com/images/copycode.gif)
<template> <div class="swiper-container"> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide" v-for="item in 16"> <el-image style="width: 100%; height: 100%" :src="url" :preview-src-list="srcList" fit="fill"> </el-image> </div> </div> </div> <!-- 如果需要分页器 --> <!-- <div class="swiper-pagination"></div>--> <!-- 导航按钮 --> <div class="swiper-button-prev btn swiper-button-black"></div> <div class="swiper-button-next btn swiper-button-black"></div> </div> </template> <script> import Swiper from 'swiper' import 'swiper/dist/css/swiper.min.css' export default { //轮播图 name:'swiper', data () { return { swiper: null, url: 'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg', srcList: [ 'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg', 'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg' ] } }, mounted () { this.swiper= new Swiper('.swiper-container', { //速度 speed:2500, //自动播放设置 autoplay: { delay: 500, disableOnInteraction: false, waitForTransition: false, }, // //轮播类型 // effect : 'coverflow', // centeredSlides: true, // //轮播类型的属性设置 // coverflowEffect: { // rotate: 90, // stretch: 10, // depth: 90, // modifier: 2, // slideShadows: true // }, //前进和后退的按钮 prevButton: '.swiper-button-prev', nextButton: '.swiper-button-next', centerInsufficientSlides: true, //循环播放 // loop: true, // slidesPerGroup: 3, //居中显示 loopFillGroupWithBlank: true, //展示张数 slidesPerView: 'auto', }) }, methods:{} }; </script> <style lang="scss"> .swiper-container { width: 100%; height: 100%; padding: 15px 55px!important; .swiper-slide { width: 290px; height: 150px; padding-left: 15px; display: flex; justify-content: center; align-items: center; } } .btn { height: 40px; width: 20px; background-size: contain; } </style>
![复制代码](https://common.cnblogs.com/images/copycode.gif)
本文来自博客园,作者:书中枫叶,转载请注明原文链接:https://www.cnblogs.com/zy-mg/p/14631882.html
标签:轮播,com,Swiper,vue2,import,true,swiper From: https://www.cnblogs.com/sexintercourse/p/17305546.html