安科网

jQuery幻灯片插件slick实例

CodeTerminator

CodeTerminator

2017-09-02

关注 关注

由于工作要将图片做成幻灯片样式，于是想到了JQuery插件slick，上网查了一下，一些效果用法实例特意在此记录下：

一.单个显示

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>jQuery幻灯片插件slick演示</title>
	<link rel="stylesheet" href="style/slick.css">
	<style>
		* { margin: 0; padding: 0;}
		.slick { width: 600px; margin: 0 auto;}
		.slick-prev:before, .slick-next:before { position: absolute; left: 0; top: 1px; color: #ccc;}
		.slick-prev { left: -35px;}
		.slick-next { right: -35px;}
		.slick-dots { bottom: -35px;}
	</style>
</head>
<body>
    <h1 style="margin: 40px; font: 32px Microsoft Yahei; text-align: center;">jQuery幻灯片插件slick演示-单个显示</h1>
	
	<div class="slick">
    <div><img src="images/1.jpg" alt=""></a></div>
    <div><img src="images/2.jpg" alt=""></div>
    <div><img src="images/3.jpg" alt=""></div>
    <div><img src="images/4.jpg" alt=""></div>
    <div><img src="images/5.jpg" alt=""></div>
	<div><img src="images/6.jpg" alt=""></div>
	<div><img src="images/7.jpg" alt=""></div>
	<div><img src="images/8.jpg" alt=""></div>
	<div><img src="images/9.jpg" alt=""></div>
</div>
</body>
<script src="script/jquery-1.8.3.js"></script>
<script src="script/slick.js"></script>
<script>
	$(function(){
		$('.slick').slick({
			dots: true
		});
	});
</script>
</html>

运行效果：

jQuery幻灯片插件slick实例

二.多个显示

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>jQuery幻灯片插件slick演示</title>
	<link rel="stylesheet" href="style/slick.css">
	<style>
		* { margin: 0; padding: 0;}
		.slick { width: 900px; margin: 0 auto;}
		.slick img { width: 280px; border: 10px solid #fff;}
		.slick-prev:before, .slick-next:before { position: absolute; left: 0; top: 1px; color: #ccc;}
		.slick-prev { left: -35px;}
		.slick-next { right: -35px;}
		.slick-dots { bottom: -35px;}
	</style>
</head>
<body>
    <h1 style="margin: 40px; font: 32px Microsoft Yahei; text-align: center;">jQuery幻灯片插件slick演示-多个显示</h1>
	
	<div class="slick">
    <div><img src="images/1.jpg" alt=""></a></div>
    <div><img src="images/2.jpg" alt=""></div>
    <div><img src="images/3.jpg" alt=""></div>
    <div><img src="images/4.jpg" alt=""></div>
    <div><img src="images/5.jpg" alt=""></div>
	<div><img src="images/6.jpg" alt=""></div>
	<div><img src="images/7.jpg" alt=""></div>
	<div><img src="images/8.jpg" alt=""></div>
	<div><img src="images/9.jpg" alt=""></div>
</div>
</body>
<script src="script/jquery-1.8.3.js"></script>
<script src="script/slick.js"></script>
<script>
	$(function(){
		$('.slick').slick({
			dots: true,
			slidesToShow: 3,
			slidesToScroll: 3
		});
	});
</script>
</html>

运行效果：

jQuery幻灯片插件slick实例
 

三.多个显示单个滑动

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>jQuery幻灯片插件slick演示</title>
	<link rel="stylesheet" href="style/slick.css">
	<style>
		* { margin: 0; padding: 0;}
		.slick { width: 900px; margin: 0 auto;}
		.slick img { width: 280px; padding: 10px;}
		.slick-prev:before, .slick-next:before { position: absolute; left: 0; top: 1px; color: #ccc;}
		.slick-prev { left: -35px;}
		.slick-next { right: -35px;}
		.slick-dots { bottom: -35px;}
	</style>
</head>
<body>
    <h1 style="margin: 40px; font: 32px Microsoft Yahei; text-align: center;">jQuery幻灯片插件slick演示-多个显示单个滑动</h1>
	
	<div class="slick">
    <div><img src="images/1.jpg" alt=""></a></div>
    <div><img src="images/2.jpg" alt=""></div>
    <div><img src="images/3.jpg" alt=""></div>
    <div><img src="images/4.jpg" alt=""></div>
    <div><img src="images/5.jpg" alt=""></div>
	<div><img src="images/6.jpg" alt=""></div>
	<div><img src="images/7.jpg" alt=""></div>
	<div><img src="images/8.jpg" alt=""></div>
	<div><img src="images/9.jpg" alt=""></div>
</div>
</body>
<script src="script/jquery-1.8.3.js"></script>
<script src="script/slick.js"></script>
<script>
	$(function(){
		$('.slick').slick({
			dots: true,
			slidesToShow: 3,
			slidesToScroll: 1
		});
	});
</script>
</html>

运行效果：

jQuery幻灯片插件slick实例

四.响应式

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>jQuery幻灯片插件slick演示</title>
	<link rel="stylesheet" href="style/slick.css">
	<style>
		* { margin: 0; padding: 0;}
		.slick { max-width: 1024px; margin: 0 auto;}
		.slick img { width: 100%;}
		.slick-prev:before, .slick-next:before { position: absolute; left: 0; top: 1px; color: #ccc;}
		.slick-prev { left: -35px;}
		.slick-next { right: -35px;}
		.slick-dots { bottom: -35px;}
	</style>
</head>
<body>
    <h1 style="margin: 40px; font: 32px Microsoft Yahei; text-align: center;">jQuery幻灯片插件slick演示-响应式</h1>
	
	<p style="margin-bottom: 20px; text-align: center; color: #f50;">试试改变浏览器窗口大小</p>
	
	<div class="slick">
    <div><img src="images/1.jpg" alt=""></a></div>
    <div><img src="images/2.jpg" alt=""></div>
    <div><img src="images/3.jpg" alt=""></div>
    <div><img src="images/4.jpg" alt=""></div>
    <div><img src="images/5.jpg" alt=""></div>
	<div><img src="images/6.jpg" alt=""></div>
	<div><img src="images/7.jpg" alt=""></div>
	<div><img src="images/8.jpg" alt=""></div>
	<div><img src="images/9.jpg" alt=""></div>
</div>
</body>
<script src="script/jquery-1.8.3.js"></script>
<script src="script/slick.js"></script>
<script>
	$(function(){
		$('.slick').slick({
			dots: true,
			slidesToShow: 4,
			slidesToScroll: 4,
			responsive: [
				{
					breakpoint: 1024,
					settings: {
						slidesToShow: 3,
						slidesToScroll: 3,
						infinite: true,
						dots: true
					}
				},
				{
				breakpoint: 600,
					settings: {
						slidesToShow: 2,
						slidesToScroll: 2
					}
				},
				{
				breakpoint: 480,
				settings: {
					slidesToShow: 1,
					slidesToScroll: 1
					}
				}
			]
		});
	});
</script>
</html>

运行效果：

jQuery幻灯片插件slick实例

五.淡入淡出

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>jQuery幻灯片插件slick演示</title>
	<link rel="stylesheet" href="style/slick.css">
	<style>
		* { margin: 0; padding: 0;}
		.slick { width: 600px; margin: 0 auto;}
		.slick img { width: 100%;}
		.slick-prev:before, .slick-next:before { position: absolute; left: 0; top: 1px; color: #ccc;}
		.slick-prev { left: -35px;}
		.slick-next { right: -35px;}
		.slick-dots { bottom: -35px;}
	</style>
</head>
<body>
    <h1 style="margin: 40px; font: 32px Microsoft Yahei; text-align: center;">jQuery幻灯片插件slick演示-淡入淡出</h1>
	
	<div class="slick">
    <div><img src="images/1.jpg" alt=""></a></div>
    <div><img src="images/2.jpg" alt=""></div>
    <div><img src="images/3.jpg" alt=""></div>
    <div><img src="images/4.jpg" alt=""></div>
    <div><img src="images/5.jpg" alt=""></div>
	<div><img src="images/6.jpg" alt=""></div>
	<div><img src="images/7.jpg" alt=""></div>
	<div><img src="images/8.jpg" alt=""></div>
	<div><img src="images/9.jpg" alt=""></div>
</div>
</body>
<script src="script/jquery-1.8.3.js"></script>
<script src="script/slick.js"></script>
<script>
	$(function(){
		$('.slick').slick({
			dots: true,
			fade: true
		});
	})
</script>
</html>

运行效果：

jQuery幻灯片插件slick实例
 

六.中心模式

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>jQuery幻灯片插件slick演示</title>
	<link rel="stylesheet" href="style/slick.css">
	<style>
		* { margin: 0; padding: 0;}
		.slick { width: 900px; margin: 0 auto;}
		.slick img { box-sizing: border-box;  width: 260px; height: 170px;}
		.slick-slide img { padding: 20px;}
		.slick-center img { padding: 10px;}
		.slick-prev:before, .slick-next:before { position: absolute; left: 0; top: 1px; color: #ccc;}
		.slick-prev { left: -35px;}
		.slick-next { right: -35px;}
		.slick-dots { bottom: -35px;}
	</style>
</head>
<body>
    <h1 style="margin: 40px; font: 32px Microsoft Yahei; text-align: center;">jQuery幻灯片插件slick演示-中心模式</h1>
	
	<div class="slick">
    <div><img src="images/1.jpg" alt=""></a></div>
    <div><img src="images/2.jpg" alt=""></div>
    <div><img src="images/3.jpg" alt=""></div>
    <div><img src="images/4.jpg" alt=""></div>
    <div><img src="images/5.jpg" alt=""></div>
	<div><img src="images/6.jpg" alt=""></div>
	<div><img src="images/7.jpg" alt=""></div>
	<div><img src="images/8.jpg" alt=""></div>
	<div><img src="images/9.jpg" alt=""></div>
</div>
</body>
<script src="script/jquery-1.8.3.js"></script>
<script src="script/slick.js"></script>
<script>
	$(function(){
		$('.slick').slick({
			centerMode: true,
			centerPadding: '60px',
			slidesToShow: 3,
			responsive: [
				{
					breakpoint: 768,
					settings: {
						arrows: false,
						centerMode: true,
						centerPadding: '40px',
						slidesToShow: 3
					}
				},
				{
					breakpoint: 480,
						settings: {
						arrows: false,
						centerMode: true,
						centerPadding: '40px',
						slidesToShow: 1
					}
				}
			]
		});
	})
</script>
</html>

运行效果：

jQuery幻灯片插件slick实例

七.图片延迟加载

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>jQuery幻灯片插件slick演示</title>
	<link rel="stylesheet" href="style/slick.css">
	<style>
		* { margin: 0; padding: 0;}
		.slick { width: 900px; margin: 0 auto;}
		.slick img { width: 280px; padding: 10px;}
		.slick-prev:before, .slick-next:before { position: absolute; left: 0; top: 1px; color: #ccc;}
		.slick-prev { left: -35px;}
		.slick-next { right: -35px;}
		.slick-dots { bottom: -35px;}
	</style>
</head>
<body>
    <h1 style="margin: 40px; font: 32px Microsoft Yahei; text-align: center;">jQuery幻灯片插件slick演示-图片延迟加载</h1>
	
	<div class="slick">
    <div><img src="images/1.jpg" alt=""></a></div>
    <div><img src="images/2.jpg" alt=""></div>
    <div><img src="images/3.jpg" alt=""></div>
    <div><img src="images/4.jpg" alt=""></div>
    <div><img src="images/5.jpg" alt=""></div>
	<div><img src="images/6.jpg" alt=""></div>
	<div><img src="images/7.jpg" alt=""></div>
	<div><img src="images/8.jpg" alt=""></div>
	<div><img src="images/9.jpg" alt=""></div>
</div>
</body>
<script src="script/jquery-1.8.3.js"></script>
<script src="script/slick.js"></script>
<script>
	$(function(){
		$('.slick').slick({
			dots: true,
			lazyLoad: 'ondemand',
			slidesToShow: 3,
			slidesToScroll: 1
		});
	})
</script>
</html>

运行效果：

jQuery幻灯片插件slick实例
 

八.自动播放

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>jQuery幻灯片插件slick演示</title>
	<link rel="stylesheet" href="style/slick.css">
	<style>
		* { margin: 0; padding: 0;}
		.slick { width: 900px; margin: 0 auto;}
		.slick img { width: 280px; padding: 10px;}
		.slick-prev:before, .slick-next:before { position: absolute; left: 0; top: 1px; color: #ccc;}
		.slick-prev { left: -35px;}
		.slick-next { right: -35px;}
		.slick-dots { bottom: -35px;}
	</style>
</head>
<body>
    <h1 style="margin: 40px; font: 32px Microsoft Yahei; text-align: center;">jQuery幻灯片插件slick演示-自动播放</h1>
	
	<div class="slick">
    <div><img src="images/1.jpg" alt=""></a></div>
    <div><img src="images/2.jpg" alt=""></div>
    <div><img src="images/3.jpg" alt=""></div>
    <div><img src="images/4.jpg" alt=""></div>
    <div><img src="images/5.jpg" alt=""></div>
	<div><img src="images/6.jpg" alt=""></div>
	<div><img src="images/7.jpg" alt=""></div>
	<div><img src="images/8.jpg" alt=""></div>
	<div><img src="images/9.jpg" alt=""></div>
</div>
</body>
<script src="script/jquery-1.8.3.js"></script>
<script src="script/slick.js"></script>
<script>
	$(function(){
		$('.slick').slick({
			dots: true,
			slidesToShow: 3,
			slidesToScroll: 1,
			autoplay: true,
			autoplaySpeed: 2000
		});
	})
</script>
</html>

运行效果：

jQuery幻灯片插件slick实例
 

九.解绑/销毁

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>jQuery幻灯片插件slick演示</title>
	<link rel="stylesheet" href="style/slick.css">
	<style>
		* { margin: 0; padding: 0;}
		.slick { width: 600px; margin: 0 auto;}
		.slick img { width: 100%;}
		.slick-prev:before, .slick-next:before { position: absolute; left: 0; top: 1px; color: #ccc;}
		.slick-prev { left: -35px;}
		.slick-next { right: -35px;}
		.slick-dots { bottom: -35px;}

		.unslick { margin-bottom: 20px; text-align: center; font-size: 14px; color: #f50; overflow: hidden; zoom: 1;}
		.unslick a { display: inline-block; padding: 5px 8px; background-color: #f50; color: #fff; text-decoration: none;}
	</style>
</head>
<body>
    <h1 style="margin: 40px; font: 32px Microsoft Yahei; text-align: center;">jQuery幻灯片插件slick演示-解绑/销毁</h1>
	
	<p class="unslick"><a href="javascript:">解绑/销毁</a> 点击后将为元素移除 slick() 方法，幻灯片将失效。</p>
	
	<div class="slick">
    <div><img src="images/1.jpg" alt=""></a></div>
    <div><img src="images/2.jpg" alt=""></div>
    <div><img src="images/3.jpg" alt=""></div>
    <div><img src="images/4.jpg" alt=""></div>
    <div><img src="images/5.jpg" alt=""></div>
	<div><img src="images/6.jpg" alt=""></div>
	<div><img src="images/7.jpg" alt=""></div>
	<div><img src="images/8.jpg" alt=""></div>
	<div><img src="images/9.jpg" alt=""></div>
</div>
</body>
<script src="script/jquery-1.8.3.js"></script>
<script src="script/slick.min.js"></script>
<script>
	$(function(){
		$('.slick').slick({
			dots: true
		});

		$('.unslick a').click(function(){
			$('.slick').unslick();
		});
	})
</script>
</html>

运行效果：

jQuery幻灯片插件slick实例

参考来源：http://www.dowebok.com/demo/2014/84/

幻灯片 slick jquery

CodeTerminator

CodeTerminator

0 关注 0 粉丝 0 动态

关注 关注

相关推荐

jQuery幻灯片插件slick实例

　　由于工作要将图片做成幻灯片样式，于是想到了JQuery插件slick，上网查了一下，一些效果用法实例特意在此记录下：。.slick-prev:before, .slick-next:before { position: absolute; left:

82413161 2017-09-02

这些效果我很喜欢，但愿对你们也有帮助

id=j02i1k10j腾讯团购切换特效，腾讯团购切换特效。id=j021ji1aajQuery自定义拖动设置时间段，可以灵活设置一天内的任意时段。id=j02cj110j极具创意的背景图转换和jquery菜单。jquery hover属性仿改图网橙色的侧

80437916 2020-05-11

ppt-页面大小和颜色更改

选中要填充的位置——颜色——可直接更改色彩，若手动设置，可点击其他颜色，标准或者自定义。选中要填充的位置——颜色——预设渐变，如果预设渐变中没有自己想要的效果，可自定义——类型、方向、角度、渐变光圈等修改。取消所有设置的背景，只剩下文本框。

VanTYS 2020-05-07

将latex的beamer做的幻灯片转换为ppt格式后的一些问题

由于雨课堂采取了ppt插件的形式运行，所以latex做出的pdf必然需要转成ppt，才能在主调窗口直接运行。好在目前版本的acrobat dc转后的pptx，效果比以前好很多，仅仅个别中文文字出现误转的情况，需要手动再修改。所以以后坚持latex阵地的老师

山水一方 2020-02-03

绝对推荐，HTML5与JQuery结合的幻灯片

//我们监听了 window.load 事件，因此我们确定幻灯片上的所有图片都能够正确进行加载。//图片的canvas效果操作是受CPU渲染影响的，//取决于这个是下一张箭头的按钮还是上一张箭头的按钮,//计算出下一张幻灯片的索引号。//若当前浏览器不支持

zhangpeng 2014-01-10

jquery焦点移动幻灯片 swipe effect slider

swipe effect slider 是一款在themeforest上售价20美元的幻灯片，该幻灯片以焦点移动的方式进行图片切换，支持缩略图预览加载，现在免费分享给大家。

yFifhting 2014-01-16

经典的一款jQuery soChange幻灯片

soChange一款多很经典的幻灯片的jQuery插件。changeType:'fade',//切换方式，可选：fade,slide，默认为fade，1.6版新增方法，详见例3-定义对象切换方式为slide. slideTime:1000,//平滑过渡时间

小肖 2016-12-26

Win10如何通过幻灯片模式来进行关机?

　　当我们不使用电脑了，就会关机，每次按部就班的关机模式，大家是否会觉得淡然无味呢？其实Win10系统可以使用幻灯片模式来关机，这样电脑就可以像手机和平板一样，滑动就可以关机了，是不是非常的有艺术感？今天小编就来为大家分享一下Win10通过幻灯片模式来进行

89384498 2016-12-20

win10怎么将桌面上的壁纸改变成幻灯片?

一张好的图片该用于一个神圣的地方,那就是桌面壁纸,不但可以发挥养眼作用,还能让别人有眼前一亮的感觉。那么win10怎么将桌面上的壁纸改变成幻灯片?相信才升级windows10的大家还不会设置吧！下面就教大家设置吧！首先点击按钮，或者键盘上的按键，找到右脚下

80236832 2016-03-19

怎么设置Win10系统在无电源情况下开启壁纸幻灯片放映？

怎么给win10系统换上幻灯片背景？教你如何在笔记本或surface没有插入AC电源的情况下，继续保持壁纸幻灯片放映工作。开启幻灯片放映是超级简单的。然而，你首先需要为你想要进行循环放映的壁纸创建一个文件夹。我建议在图片文件夹下创建一个名为幻灯片放映的文件

combine 2015-08-17

Win10怎么设置自动更换桌面背景？Win10幻灯片背景设置方法

7、这里设置背景的显示方式，看你的图片大小和爱好吧。

86206132 2015-08-11

和秋叶一起学PPT：又快又好打造说服力幻灯片

　　《和秋叶一起学ppt：又快又好打造说服力幻灯片》适合ppt初学者，但即便你是一个ppt老手，这本书一样能让你大呼开卷有益。这本书将帮助你解决如下问题：1、快速掌握powerpoint最新版本的功能操作；2、快速扩充powerpoint页面美化的思维方法

chenyanyan 2013-06-14

如何制作好的PPT

向观众发送说明幻灯片的详细书面宣传材料，比仅用 PowerPoint幻灯片，更利于观众理解演示的内容。在演示完成以后，再向观众发放一份详细的宣传材料或印刷物，您就不必用大量文本来填充 PowerPoint幻灯片。避免使用PowerPoint剪贴画或其它卡通

luohnoyo 2013-02-05

乐享PowerPoint！5个PPT成就幻灯片达人

5个PPT成就幻灯片达人。　　16位幻灯片达人联袂力荐！　　读一读，你会发现它与以往的PPT办公软件书籍有那么多的不同。PPT来自工作，但却紧密联系着我们的生活，自我介绍、电子相册、婚礼短片、休闲小品等都是PPT施展的舞台，而这些领域对创意、审美、动画有着

嵌入式企鹅圈 2012-04-10

关于PPT的制作

如果您设计的幻灯片杂乱无章、文本过多、不美观，那么就不能组成一个吸引人的演示来传递信息。本文提出的这些建议将帮助您开发出专业且引人注目的演示。PowerPoint从水平或横向使用幻灯片。所以除了PowerPoint幻灯片以外，最好还要准备一份书面资料，强调

youyoumo 2012-03-03

CNCF网络研讨会：Kubernetes 1.13的新功能（视频+幻灯片）

此版本继续关注Kubernetes的稳定性和可扩展性，其中在存储和群集生命周期领域的三个主要功能实现普遍可用。此版本中的显着毕业特征包括：kubeadm简化集群管理、容器存储接口和CoreDNS作为默认DNS。此外，还有一系列持续不断的内部改进和新的alp

IT兄弟团 2019-06-30

小清新的jQuery 幻灯片jQuery ck-slide 图片轮播

ck_slide 是一款小清新的jQuery 幻灯片插件，它非常小巧，压缩后仅 3KB，基本功能可以满足。它支持淡入淡出/左右滚动、箭头/圆点控制、自动播放。在线实例默认左右滚动自动播放使用方法<divclass="ck-slide&quo

pplxh 2016-09-07

一款经典的jQuery slidizle 幻灯片

jQuery广告幻灯片进度条，水平/左右切换，垂直/上下切换，自动播放，缩略图列表切换

有心就有方向 2016-08-31

jquery全屏幻灯片焦点图轮播插件演示下载

1 小米3发布官网jQuery焦点图全屏大图。2 jQuery左侧图片加右侧说明焦点图图片轮滚。3 jQuery右侧选项卡收缩幻灯片。4 jQuery轮播图插件jCarousel

88570299 2014-10-16

亿级用户万台服务器背后，vivo云服务容器化如何破茧化蝶？

2018年数人云Meetup第一站，联合vivo在深圳举办 Building Microservice 系列活动第一期。本次技术沙龙vivo、中兴通讯、华为、数人云共同派出技术大咖，为开发者们带来有关微服务、容器化、配置中心、服务网格等领域的实战与干货分享

wanchaopeng 2019-06-26
CodeTerminator

CodeTerminator

W3CSchool教程
HTML 教程
CSS 教程
Bootstrap 教程
Javascript 教程
jQuery 教程
后端教程
C 教程
Java 教程
PHP 教程
Python 教程
Go 教程
移动开发
Android 教程
Swift 教程
Kotlin 教程
jQuery Mobile 教程
ionic 教程
关于我们
新闻动态
联系方式
招聘英才
安科实验室
帮助与反馈

安科网(Ancii)，中国第一极客网

Copyright © 2013 - 2019 Ancii.com

京ICP备18063983号 京公网安备11010802014868号