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

Today I will show you how to analyze the principle and use of the Swiper plug-in. The content of the article is good. Now I would like to share it with you. Friends who feel in need can understand it. I hope it will be helpful to you. Let's read it along with the editor's ideas.

Swiper introduction

Swiper is an open source plug-in to solve the case of touch sliding in front-end development.

Swiper official website:

The use of swiper

The first step to use swiper is to download swiper

Find what you need in the online demo on the official website after the download is complete.

Here I chose 010 from the basic presentation.

First of all, find the demo file of 010 in the compressed package you downloaded

After opening, click the right mouse button to open the source code of the web page

Open the editor and introduce two swiper.min.css swiper-bundle.min.js files into your own project.

Copy the structure html style css and js code in the open web page source code

Finally, you can use the swiper plug-in

The code implements Swiper demo html, body {position: relative; height: 100%;} body {background: # eee; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; color: # 000; margin: 0 Padding: 0;} .swiper {width: 100%; height: 100%;} .swiper-slide {text-align: center; font-size: 18px; background: # fff; / * Center slide text vertically * / display:-webkit-box Display:-ms-flexbox; display:-webkit-flex; display: flex;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center; justify-content: center;-webkit-box-align: center;-ms-flex-align: center -webkit-align-items: center; align-items: center;}. Swiper-slide img {display: block; width: 100%; height: 100%; object-fit: cover } Slide 1 Slide 2 Slide 3 Slide 4 Slide 5 Slide 6 Slide 7 Slide 8 Slide 9 var swiper = new Swiper (".mySwiper", {})

Finally, if you want to change the API of the Swiper plug-in, you can read the API documentation, and then combine the project changes.

The above is how to analyze the principle and use of the Swiper plug-in all the content, more on how to analyze the principle and use of the Swiper plug-in related content can search the previous article or browse the following article to learn ha! I believe the editor will add more knowledge to you. I hope you can support it!

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.