1.安装插件swiper和vue-awesome-swiper
npm install swiper vue-awesome-swiper
2.在main.js里使用样式文件
import VueAwesomeSwiper from "vue-awesome-swiper";
import "swiper/swiper-bundle.css"; // 此处看下载的swiper版本是多少 引入对应的css文件 具体看下方5.注意
createApp(App).use(VueAwesomeSwiper).mount("#app");
3.在使用的页面,引入需要使用到的组件,比如常用的左右切换箭头,小圆点指示器等;如下所示:
import { Swiper, SwiperSlide } from 'swiper/vue'
// 引入swiper样式(按需导入)
import 'swiper/css/pagination' // 轮播图底面的小圆点
import 'swiper/css/navigation' // 轮播图两边的左右箭头
// import 'swiper/css/scrollbar' // 轮播图的滚动条, 轮播图里一般不怎么会使用到滚动条,如果有用到的话import导入就行
// 引入swiper核心和所需模块
import { Autoplay, Pagination, Navigation, Scrollbar } from 'swiper'
const navigation = ref({
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
});
// 在modules加入要使用的模块
const modules = [Autoplay, Pagination, Navigation, Scrollbar]
const prevEl = (item, index) => {
// console.log('上一张' + index + item)
};
const nextEl = () => {
// console.log('下一张')
};
// 更改当前活动swiper
const onSlideChange = (swiper) => {
// swiper是当前轮播的对象,里面可以获取到当前swiper的所有信息,当前索引是activeIndex
console.log(swiper.activeIndex)
}
4.在页面中使用组件和相关的模块
<swiper
:modules="modules"
:loop="true"
:slides-per-view="1"
:space-between="50"
:autoplay="{ delay: 4000, disableOnInteraction: false }"
:navigation="navigation"
:pagination="{ clickable: true }"
:scrollbar="{ draggable: false }"
class="swiperBox"
@slideChange="onSlideChange"
>
<swiper-slide>Slide 1</swiper-slide>
<swiper-slide>Slide 2</swiper-slide>
<swiper-slide>Slide 3</swiper-slide>
<div class="swiper-button-prev" @click.stop="prevEl(item, index)" />
<!--左箭头。如果放置在swiper外面,需要自定义样式。-->
<div class="swiper-button-next" @click.stop="nextEl" />
<!--右箭头。如果放置在swiper外面,需要自定义样式。-->
<!-- 如果需要滚动条 -->
<!-- <div class="swiper-scrollbar"></div> -->
</swiper>
5.注意:
-
Swiper 5.x,4.x,3.x版本,引入dist或package里的swiper.js或swiper.min.js, swiper.css或swiper.min.css
-
Swiper 6.x版本以后,引入dist或package里的swiper-bundle.js或swiper-bundle.min.js, swiper-bundle.css或swiper-bundle.min.css
-
本文下载的版本如下
"vue-awesome-swiper": "^5.0.1", "vue-router": "^4.2.4"
-
参数介绍:
modules
:
loop
: 是否循环播放
slides-per-view
:控制一次显示几张轮播图
space-between
: 每张轮播图之间的距离,该属性不可以和margin 属性同时使用;
autoplay
: 是否自动轮播, delay为间隔的毫秒数;disableOnInteraction属性默认是true,也就是当用户手动滑动后禁用自动播放, 设置为false后,将不会禁用,会每次手动触发后再重新启动自动播放。
navigation
: 定义左右切换箭头
pagination
: 控制是否可以点击圆点指示器切换轮播
scrollbar
: 是否显示轮播图的滚动条, draggable设置为 true就可以拖动底部的滚动条(轮播当中,一般不怎么会使用到这个属性)
注
本文有大部分内容来自其它文章,如有不妥可以联系我删除
原文链接:https://blog.csdn.net/Shivy_/article/details/129121407