slick插件使用实例，带两种切换功能

最新推荐文章于 2025-06-03 09:09:55 发布

qq_42708369

最新推荐文章于 2025-06-03 09:09:55 发布

阅读量2.9k

点赞数

CC 4.0 BY-SA版权

文章标签： slick插件轮播图插件带锚点轮播图

本文链接：https://blog.youkuaiyun.com/qq_42708369/article/details/90170922

本文详细介绍如何在网页中引入并设置轮播图，包括css样式调整、js初始化及后台图片动态加载技巧，同时分享了单张与多张轮播的不同配置参数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

slick两种切换按钮
1.引入css与js(在jquery之后)
在这里插入图片描述

2.在页面写需要轮播的图（可动态从后台获取，这里直接页面写的）
后台获取后渲染到页面
以下为静态html

3.js来初始与设置轮播类型 $('.single-item').slick({//单张轮播 dots: true, //带锚点 autoplay: true, //自动播放 infinite: true, //无限循环 peed: 5000 //循环间隔 }); $('.multiple-items').slick({ autoplay: true, infinite: true, slidesToShow: 6, //页面循环显示几个 slidesToScroll: 6, //循环的个数 speed: 5000 }); 4.css调整锚点样式（根据个人需求调整） ![箭头锚点](https://img-blog.csdnimg.cn/20190513122201865.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzA4MzY5,size_16,color_FFFFFF,t_70) ![dot锚点](https://img-blog.csdnimg.cn/20190513122254497.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzA4MzY5,size_16,color_FFFFFF,t_70)