swiper 이전 버전(5.4.5)
swiper carousel 지도 플러그인은 사용하기 쉽지만 함정이 많습니다.
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>
위 코드의 효과도는 다음과 같습니다. 실제 전개중인 사진은 요청시 자체 공급~
