swiper旧版（5.4.5）
swiper轮播图插件好用但坑多，版本之间有很多写法都不同，p话不多说，直接上代码
1、安装swipr插件
npm i swiper@4.5.4
2、在vue项目用到的地方使用
import Swiper from "swiper"
import "swiper/css/swiper.min.css"
3、上样例（注释写的很全应该都能看懂吧）
<template>
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="../image/1.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="../image/2.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="../image/3.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="../image/4.jpg" alt="">
</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination">
</div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</template>
<script>
import Swiper from "swiper"
import "swiper/css/swiper.min.css"
export default {
data(){
return{
}
},
mounted() {
var mySwiper = new Swiper ('.swiper', {
loop: true, // 循环模式选项
autoplay: {
delay:3000,//自动轮播间隔时间，单位ms
disableOnInteraction: false,//点击或者滑动切换后仍然会自动轮播
},
speed:1000,//轮播一次的速度，单位ms
// 如果需要分页器
pagination: {
el: '.swiper-pagination',//分页器属性名
type:'bullets',//小圆点
clickable:true,//设置后可点击对应圆点跳转对应轮播
bulletClass : 'my-bullet',//自定义分页器的属性名，自定义样式用
renderBullet: function (index, className) {
//此函数可自定义群内的值，如1,2,3,4...
return '<span class="' + className + '">' + (index + 1) + '</span>';
},
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
})
}
}
</script>
<style>
.swiper,.swiper-wrapper,.swiper-slide img{
width: 100vw;
height: 100vh;
}
/*自定义分页器样式*/
.my-bullet{
display: inline-block;
width: 50px;
height: 50px;
margin: 0 20px;
border-radius: 25px;
background-color: rgba(0,0,0,.5);
line-height: 50px;
color: #fff;
}
/*分页器选中颜色*/
.swiper-pagination-bullet-active {
background-color: blue
}
.swiper-button-prev{
/*设置点击区域大小*/
width: 200px;
height: 400px;
/*定位*/
margin-top: -200px;
position: absolute;
left: 50px;
top: 50%;
/*设置后可以隐藏，在所在区域自写样式*/
/*opacity: 0;*/
}
.swiper-button-next{
/*设置点击区域大小*/
width: 200px;
height: 400px;
/*定位*/
margin-top: -200px;
position: absolute;
right: 50px;
top: 50%;
/*设置后可以隐藏，在所在区域自写样式*/
/*opacity: 0;*/
}
</style>
swiper新版（7.4.1）
1、安装swipr插件
npm i swiper@7.4.1
2、在vue项目用到的地方使用
注意：新版功能分隔出来，需按需引入，这里引入常用的三个：自动播放，前进后退，分页器。（如不引入会造成功能缺失）
import Swiper,{
Autoplay,Navigation, Pagination }from "swiper"
Swiper.use([Autoplay,Navigation, Pagination]);
import "swiper/swiper-bundle.css"
3、上样例（大多数与旧版一样，怕你们懒得往上翻）
<template>
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="../image/1.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="../image/2.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="../image/3.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="../image/4.jpg" alt="">
</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination">
</div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</template>
<script>
import Swiper,{
Autoplay,Navigation, Pagination }from "swiper"
Swiper.use([Autoplay,Navigation, Pagination]);
import "swiper/swiper-bundle.css"
export default {
data(){
return{
}
},
mounted() {
var mySwiper = new Swiper ('.swiper', {
loop: true, // 循环模式选项
autoplay: {
delay:3000,//自动轮播间隔时间，单位ms
disableOnInteraction: false,//点击或者滑动切换后仍然会自动轮播
},
speed:1000,//轮播一次的速度，单位ms
// 如果需要分页器
pagination: {
el: '.swiper-pagination',//分页器属性名
type:'bullets',//小圆点
clickable:true,//设置后可点击对应圆点跳转对应轮播
bulletClass : 'my-bullet',//自定义分页器的属性名，自定义样式用
renderBullet: function (index, className) {
//此函数可自定义群内的值，如1,2,3,4...
return '<span class="' + className + '">' + (index + 1) + '</span>';
},
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
})
}
}
</script>
<style>
.swiper,.swiper-wrapper,.swiper-slide img{
width: 100vw;
height: 100vh;
}
/*自定义分页器样式*/
.my-bullet{
display: inline-block;
width: 50px;
height: 50px;
margin: 0 20px;
border-radius: 25px;
background-color: rgba(0,0,0,.5);
line-height: 50px;
color: #fff;
}
/*分页器选中颜色*/
.swiper-pagination-bullet-active {
background-color: blue
}
.swiper-button-prev{
/*设置点击区域大小*/
width: 200px;
height: 400px;
/*定位*/
margin-top: -200px;
position: absolute;
left: 50px;
top: 50%;
/*设置后可以隐藏，在所在区域自写样式*/
/*opacity: 0;*/
}
.swiper-button-next{
/*设置点击区域大小*/
width: 200px;
height: 400px;
/*定位*/
margin-top: -200px;
position: absolute;
right: 50px;
top: 50%;
/*设置后可以隐藏，在所在区域自写样式*/
/*opacity: 0;*/
}
</style>
以上代码效果图如下：实际开发中图片按需自供咯~
