1.前言
今天安装 swiper的时候 直接安装了
轮播效果也有,无限循环滚动也有
但是自动滚动,切换特效等效果不生效
简单记录如下
2. 原因
就是上图中的话,这个swiper6x目前是对 vue 3x兼容的,对 vue2x兼容性应该不够完善
3.安装旧版
如果是
vue2x带上版本号,因为,默认是最新的
npm install swiper@5 vue-awesome-swiper@3 -S
4. 引入
import VueAwesomeSwiper from 'vue-awesome-swiper import 'swiper/css/swiper.css' // swiper5 的引用方式
5. 使用
<div id="my-swiper-wrapper"> <swiper ref="mySwiper" :options="swiperOptions"> <swiper-slide v-for="(item, i) in swImgs" :key="i"> <img :src="item" :alt="i" /> </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> <div class="swiper-scrollbar" slot="scrollbar"></div> </swiper> </div>
6.简单配置
data() { return { swImgs: [ require("@/assets/img/2.jpg"), require("@/assets/img/3.jpg"), require("@/assets/img/4.jpg"), require("@/assets/img/5.jpg"), ], swiperOptions: { pagination: { el: ".swiper-pagination", //分页标签 clickable: true //允许分页点击跳转 }, navigation: { // 左右按钮 nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, // 设定初始化时slide的索引 initialSlide: 2, // 如果需要滚动条 scrollbar: { el: ".swiper-scrollbar", }, loop:true,// 无限循环, // autoplay: true,//可选选项，自动滑动 autoplay: { delay: 5000, stopOnLastSlide: false, disableOnInteraction: true }, effect:"cube" // 切换特效 }, }; },
7. 简单的样式配置
<style lang="less" scoped> @sw_width: 350px; #my-swiper-wrapper{ width: @sw_width; height: 200px; border: 2px solid red; margin: 20px auto; img{ width: @sw_width; height: 200px; } } </style>
