swiper Chinese official website: https://www.swiper.com.cn/api/index.html
Step One: Download the plug-swiper
npm install swiper --save-dev
Step two: the introduction of main.js
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.css';
The third step: the introduction of components that need to use the swiper swiper's initialization mounted on the inside
import Swiper from "swiper";
mounted() {
let that = this; // If you want to use the following variables, define
that.mySwiper = new Swiper(".swiper-container", {
autoplay: false, // whether to automatically scroll
loop: false, // whether the cycle
initialSlide: 0, // initialize the first few pages
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
} // use the left and right buttons
on: {
transitionEnd () {// Click event trigger transition complete
that.activeIndex = that.mySwiper.activeIndex; //activeIndex轮播下标
}
}//event
});
}
Step four: in the template file
<Div class = "swiper-container"> // class name must not be changed
<div class="swiper-wrapper">
<Img src = "../../ assets / whalbum / example1.png" class = "swiper-slide" /> // img portion of the cycle
<img src="../../assets/whalbum/yyl.png" class="swiper-slide" />
<img src="../../assets/whalbum/example1.png" class="swiper-slide" />
<img src="../../assets/whalbum/example1.png" class="swiper-slide" />
<img src="../../assets/whalbum/example1.png" class="swiper-slide" />
</div>
<Img src = "../../ assets / whalbum / arrow.png" class = "swiper-button-next" /> // right and left arrow (this is a custom written)
<img src="../../assets/whalbum/arrow.png" class="swiper-button-prev" />
<-! <Div class = "swiper-button-next"> </ div> -> // This is the original left and right arrows
<!--<div class="swiper-button-prev"></div>-->
</div>
Step Five: Modify the arrow style (if not modified can be skipped)
.swiper-container {
position: relative;
.swiper-button-next,
.swiper-button-prev {
outline: none;
background: none;
width: 75px;
height: 100px;
top: 35%;
}
.swiper-button-next {
transform: rotate(180deg);
}
.swiper-button-next:before {
left: 0;
}
.swiper-button-prev:before {
right: 0;
}
}