Shulou(Shulou.com)06/03 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.