一、安装配置
名称 | 版本号 |
---|---|
swiper | 5.x |
vue-awesome-swiper | 3.1.3 |
1、安装命令:
npm install swiper@5.x vue-awesome-swiper@3.1.3 --save-dev
二、在main.js里引入:
关键代码:
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/css/swiper.css';Vue.use(VueAwesomeSwiper)
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/css/swiper.css';
Vue.use(VueAwesomeSwiper)
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
三、在页面里使用:
<template>
<div>
<swiper
class="my_swiper"
:options="swiperOption"
@mouseover.native="handleAuto(true)"
@mouseleave.native="handleAuto(false)"
>
<swiper-slide v-for="(item,index) in picList" :key="index" @click.native="handleSwiper"><img :src="item.pic_src" alt="" :data-path="item.pic_src" data-yaya="图片"></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>
</swiper>
</div>
</template>
<script>
export default {
data() {
return {
// 图片数据
picList:[
{ pic_src:'https://t7.baidu.com/it/u=1423490396,3473826719&fm=193&f=GIF' },
{ pic_src:'https://t7.baidu.com/it/u=4158958181,280757487&fm=193&f=GIF' },
{ pic_src:'https://t7.baidu.com/it/u=602106375,407124525&fm=193&f=GIF' },
{ pic_src:'https://t7.baidu.com/it/u=3915743384,2060495762&fm=193&f=GIF' },
{ pic_src:'https://t7.baidu.com/it/u=55748064,2074988836&fm=193&f=GIF' },
],
// Swiper 配置项
swiperOption: {
direction: 'horizontal', // Swiper的滑动方向,可设置为水平方向切换 horizontal(默认) 或垂直方向切换 vertical
slidesPerView: 1, // Swiper的列数
// spaceBetween: 30, //板块间距
// 设置分页器
pagination: {
el: ".swiper-pagination",
type: 'bullets',//将分页的类型改为圆点(默认)
clickable: true,// 点击可切换
// hideOnClick :true, // 点击swiper-slide显隐
},
// 设置前进后退按钮
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
// 设置自动轮播
autoplay: {
delay: 1000, // 2秒切换一次
disableOnInteraction: false, // 用户操作swiper之后,是否禁止autoplay。默认为true:停止。
},
loop: true, //无缝轮播
grabCursor : true, // 覆盖Swiper 时指针会变成手掌形状,拖动时指针会变成抓手形状
},
};
},
methods: {
// 鼠标覆盖停止自动切换,鼠标离开开始自动切换
handleAuto(status){
//如果你初始化时没有定义Swiper实例,后面也可以通过Swiper的HTML元素来获取该实例
let mysSwiper = document.querySelector('.my_swiper').swiper;
status?(mysSwiper.autoplay.stop()):(mysSwiper.autoplay.start());
},
// 鼠标点击页面
handleSwiper(event){
let dataset = event.target.dataset;
console.log(dataset);
console.log(dataset.path,dataset.yaya); // 自定义,可获取相应的值
// 跳转
// window.location.href = "https://www.baidu.com"
}
},
};
</script>
<style scoped>
.my_swiper{
/* width: 100%; */
width: 750px;
height: 500px;
}
.my_swiper>.swiper-slide {
height: 100%;
}
.my_swiper img{
display: block;
/* width: 100%; */
height: inherit;
}
/* 设置小圆点样式 */
.my_swiper /deep/ .swiper-pagination-bullet {
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
font-size: 12px;
color:#000;
opacity: 1;
background: rgba(0,0,0,0.2);
}
/* 设置小圆点激活样式 */
.my_swiper /deep/ .swiper-pagination-bullet-active {
color:#fff;
background: #151391;
}
</style>
效果图: