This article is a mirror article of machine translation, please click here to jump to the original article.

Architect_Programmer_Code Agriculture Network»Architect › Front-end design & web › Html/CSS/JavaScript › JS adapts to the screen size carousel graph
View: 8656|Reply: 0

[JavaScript] JS adapts to the screen size carousel graph

[Copy link]
Posted on 9/25/2020 10:15:17 AM | | | |
Requirements: When accessing the mobile terminal, the carousel chart displays only 1 piece of content, when it is on the tablet terminal, it displays 2 pieces of content, and when it is on the PC side, it displays 4 pieces of content.

First, under the renderings:



We know that bootstrap has a grid system, which can adapt very well according to the size of the device, the principle is actually the media in CSS, but my carousel function uses the Swiper plugin, which is set according to js parameters.

Swiper is a swipe effect plug-in created in pure javascript, for mobile devices such as mobile phones and tablets.
Bootstrap grid system:



Details:The hyperlink login is visible.

If you use pure CSS, the code is as follows (not for me):

js is judged by the Window matchMedia() method, and the parameters are adjusted and adapted. The code is as follows:

(End)




Previous:.NET/C# threads catch exception information
Next:[Actual combat] ASP.NET Core is based on Redis distributed lock flash sale
Disclaimer:
All software, programming materials or articles published by Code Farmer Network are only for learning and research purposes; The above content shall not be used for commercial or illegal purposes, otherwise, users shall bear all consequences. The information on this site comes from the Internet, and copyright disputes have nothing to do with this site. You must completely delete the above content from your computer within 24 hours of downloading. If you like the program, please support genuine software, purchase registration, and get better genuine services. If there is any infringement, please contact us by email.
Mail To:help@itsvse.com