Use purpose: we will need a lot of dynamic rotation in the development of pictures, such as their own JS writing is too troublesome, you can use the plug-in Swiper to solve the rotation of sliding effects
Swiper renderings are mostly mobile
Use steps:
1. Open the official website of Swiper
www.swiper.com.cn/
2. Click Online Demo – Basic Demo
3. Find the renderings you want and remember the numbers
4. Click the upper left corner to download all to enter the download page, click to download the first module marked red
5. Decompress the download file and go to the folder
Click the Package folder to find the corresponding JS and CSS files to import the desired project location
Min is the compressed format of code
Swiper. Min. Js or swiper. Js
Swiper. Min. CSS or swiper. CSS
6. Import the two files to the HTML page
Note: the JS code is introduced after the HTML text
7. Go to the demos folder and go to the page you found in step 3
8. Click to enter the page, right click to view the source code of the page, paste the required HTML code, CSS style, and js function into the HTML page of our project
(1) HTML code:
(2) Needed CSS code snippet:
Note: when importing CSS code, be careful not to throw extra styles into it, resulting in cascading styles.
Swiper.min.js: swiper.min.js: swiper.min.js: swiper.min.js: swiper.min.js: swiper.min.js
Note: The calling code should be placed below the import file.
9. At this point, the initial import has been completed, next debugging, according to their own needs to debug the code CSS style attributes
10.Swiper is powerful enough to control the image state by modifying the call function without modifying the imported JS files and CSS files
Click the API documentation on the official website
Control dynamic effects by modifying properties and adding methods