效果图展示:
一、安装
swiper5
稳定版本5.4.5
npm install swiper@5.4.5 vue-awesome-swiper@4.1.1
swiper各版本区别地址:https://www.swiper.com.cn/about/us/index.html
二、vue-awsome-swiper引用方式
按照组件形式局部导入:
<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
export default {
name: 'WorkShop',
components: {
Swiper,
SwiperSlide,
},
data() {
return {
swiperOption: {
direction: 'vertical', // Swiper的滑动方向,设置为垂直滑动
loop: true, // 循环模式选项
initialSlide: 0, // 初始化时slide的索引,为第一页
autoplay: {
delay: 2500, // 自动轮播间隔时间,单位ms
stopOnLastSlide: false, // 如果设置为true,当切换到最后一个slide时停止自动切换。(loop模式下无效)。
disableOnInteraction: false, // 点击或者滑动切换后仍然会自动轮播
},
speed: 1000, //轮播一次的速度,单位ms
// 如果需要分页器
pagination: {
el: '.swiper-pagination', // 分页器属性名
clickable: true, // 设置后可点击对应圆点跳转对应轮播
},
},
}
},
}
</script>
或者全局导入:
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)
三、完整代码案例
<template>
<div class="main">
<swiper class="swiper" :options="swiperOption">
<swiper-slide>
<div class="work">
<img class="work-img" src="@/assets/bg/work-shop.png" alt="" />
<div class="work-title">
11111111111
</div>
</div>
</swiper-slide>
<swiper-slide>
<div class="work">
<img class="work-img" src="@/assets/bg/work-shop.png" alt="" />
<div class="work-title">
22222222222
</div>
</div>
</swiper-slide>
<swiper-slide>
<div class="work">
<img class="work-img" src="@/assets/bg/work-shop.png" alt="" />
<div class="work-title">
33333333333
</div>
</div>
</swiper-slide>
<swiper-slide>
<div class="work">
<img class="work-img" src="@/assets/bg/work-shop.png" alt="" />
<div class="work-title">
4444444444444
</div>
</div>
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
</template>
<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
export default {
name: 'WorkShop',
components: {
Swiper,
SwiperSlide,
},
data() {
return {
swiperOption: {
direction: 'vertical', // Swiper的滑动方向,设置为垂直滑动
loop: true, // 循环模式选项
initialSlide: 0, // 初始化时slide的索引,为第一页
autoplay: {
delay: 2500, // 自动轮播间隔时间,单位ms
stopOnLastSlide: false, // 如果设置为true,当切换到最后一个slide时停止自动切换。(loop模式下无效)。
disableOnInteraction: false, // 点击或者滑动切换后仍然会自动轮播
},
speed: 1000, //轮播一次的速度,单位ms
// 如果需要分页器
pagination: {
el: '.swiper-pagination', // 分页器属性名
clickable: true, // 设置后可点击对应圆点跳转对应轮播
},
},
}
},
}
</script>
<style scoped lang="less">
.main {
display: flex;
justify-content: center;
padding-top: 22px;
.swiper {
height: 240px;
width: 457px;
position: absolute;
border-radius: 8px;
.swiper-slide {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-weight: bold;
}
}
}
/deep/.swiper-pagination-bullet {
background: #ffffff;
border-radius: 50%;
}
/deep/.swiper-pagination-bullet-active {
background: white;
}
/deep/.swiper-pagination {
top: 40%;
right: 15px;
}
.work {
width: 100%;
height: 100%;
position: relative;
.work-img {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0.4;
}
.work-title {
top: 48%;
position: absolute;
width: 426px;
height: 50px;
color: #d0ecff;
font-size: 12px;
text-align: left;
line-height: 18px;
margin: 28px 0 0 16px;
opacity: 0.7;
}
}
.work-title:before {
content: '\00A0\00A0\00A0\00A0\00A0\00A0';
}
</style>