广告
广告
广告
html/css/javascript您现在的位置是:主页 > html/css/javascript >

两个slick幻灯模块相互关联效果

2023-11-18 21:30:51html/css/javascript 167人已围观

效果截图

参考代码

<div class="slider slider-for">
	<div>
		<h3>1</h3>
	</div>
	<div>
		<h3>2</h3>
	</div>
	<div>
		<h3>3</h3>
	</div>
	<div>
		<h3>4</h3>
	</div>
	<div>
		<h3>5</h3>
	</div>
</div>
<div class="slider slider-nav">
	<div>
		<h3>1</h3>
	</div>
	<div>
		<h3>2</h3>
	</div>
	<div>
		<h3>3</h3>
	</div>
	<div>
		<h3>4</h3>
	</div>
	<div>
		<h3>5</h3>
	</div>
</div>
<script>
$('.slider-for').slick({
	slidesToShow: 1,
	slidesToScroll: 1,
	arrows: false,
	fade: true,
	asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
	slidesToShow: 3,
	slidesToScroll: 1,
	asNavFor: '.slider-for',
	dots: true,
	centerMode: true,
	focusOnSelect: true
});
</script>

 


扫码添加技术微信【解决问题,仅需10元起】

专注中小企业网站建设、网站安全15年。
熟悉各种CMS,精通PHP+MYSQL、HTML5、CSS3、Javascript等。
承接:企业仿站、网站修改、网站改版、BUG修复、问题处理、二次开发、PSD转HTML、网站被黑、网站漏洞修复等。
专业解决各种疑难杂症,您有任何网站问题都可联系我们技术人员微信。
➥ 可淘宝担保交易,安全无风险

广告
广告
技术微信