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

This article mainly introduces "what function does slick have". In daily operation, I believe many people have doubts about what function slick has. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer the doubts about "what function does slick have?" Next, please follow the editor to study!

JQuery name: Slick

1. Multi-group switching

Multiple groups are switched at the same time, such as the following picture, the first screen is 1Jing 2jue 3 pictures, after clicking the button on the next screen, it will be cut directly to 4JI 5JI 6 screens.

two。 Responsive compatibility

Adaptive to this requirement is necessary, look at the effect, it is not bad.

3. Individually fixed slide width

You can set a different width for each cut image, that is, the width is not uniform.

4. Automatic height

Highly adaptive, that is, if there is multiline text, it will not be hidden because of the default height.

5. Center mode

Center the display mode and highlight which image in the middle.

6.LazyLoading (delayed loading mode)

Such as DEMO, first of all, the first three images are loaded by default, and the fourth one starts, and only loads when you need to switch, so as to achieve the optimization effect of loading on demand.

7. Auto playback

The xx interval can be set to switch automatically.

8. Gradient toggle effect

Add some cutting effect.

9. Thumbnail mode

You can add thumbnails under the larger image, and the advantage is that users can predict the content of the next picture. Sometimes they really admire the predecessors who created these slide patterns, and their ideas are very comprehensive.

10. Drag and drop switch

Drag and drop toggle with mouse or gesture, the effect is the same as APP, Cool~

The following picture has typos, the S Baidu five (cut-> cut) sorry …

The plug-in Slick is versatile and practical.

Js initializes and sets the carousel type $('.single-item') .slick ({/ / single carousel dots:true,// with anchor autoplay:true,// automatic playback infinite:true,// infinite loop peed:5000// loop interval}); $(' .multiple-items') .slick ({the autoplay:true,infinite:true,slidesToShow:6,// page loops the number of several slidesToScroll:6,// loops speed:5000}) 4.css adjusts the anchor style (according to individual needs)!

At this point, the study on "what is the function of slick" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.