How to use the Swiper plug-in pager
Editor to share with you how to use the Swiper plug-in pager, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!
Introduction of swiper.min.css
Introduction of query.min.js and swiper.min.js
General style references to pager and carousel
. swiper-container {
Margin: 0 auto
Position: relative
Overflow: hidden
Width:100%
}
. swiper-slide {
Position: relative
Width:100%
}
# article-slide p img {
Width: 100%
Display: block
}
# article-slide. Swiper-aa {
Width: 100%
Position: absolute
Text-align: center
Z-index: 210
Bottom: 10px
Left: 0
}
.swiper-pagination-bullet-active {
Background: red
}
# article-slide .swiper-pagination-bullet {
Margin:0 5px
}
Html style:
For pictures
For pager
Js part
Var countrySwp = new Swiper ('# article-slide', {
Pagination:'. Swiper-aa'
SpaceBetween: 25
InitialSlide: 0
SlidesPerView: 'auto'
CenteredSlides: true
PaginationClickable: true
PaginationType:'bullets'
})
The above is all the contents of the article "how to use the Swiper plug-in pager". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!
