swiper old version (5.4.5)
The swiper carousel map plug-in is easy to use but has many pitfalls. There are many different ways of writing between versions, so I won’t say much about p, just upload the code directly
1. Install the swipr plugin
npm i swiper@4.5.4
2. Use it where the vue project uses it
import Swiper from "swiper"
import "swiper/css/swiper.min.css"
3. The above example (the comments are very complete and should be understandable)
<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>
New version of swiper (7.4.1)
1. Install the swipr plugin
npm i swiper@7.4.1
2. Use it where the vue project uses it
Note: The functions of the new version are separated and need to be introduced on demand. Here are three commonly used ones: autoplay, forward and backward, and pager.（如不引入会造成功能缺失）
import Swiper,{
Autoplay,Navigation, Pagination }from "swiper"
Swiper.use([Autoplay,Navigation, Pagination]);
import "swiper/swiper-bundle.css"
3. Upload samples (most of them are the same as the old version, I'm afraid you are too lazy to look up)
<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>
The effect diagram of the above code is as follows: the pictures in the actual development are self-supplied on demand~
