我正在使用jQuery Slick在我的网站上使用幻灯片。
加载页面时,我的幻灯片会隐藏,并且我可以单击一些缩略图来打开我的幻灯片。
每个缩略图都有一个数据编号属性(我的变量),当单击缩略图时,我的幻灯片会自行打开,并且应根据单击的缩略图来设置初始幻灯片。
这是我的代码,没有变量。我选择拇指 4 只是为了示例,它工作正常:
$(".thumb").click(function(){
$(".slider").show();
setTimeout(function(){
$('.slider').slick({
slidesToShow: 4,
slidesToScroll: 1,
centerMode: true,
initialSlide : 4,
infinite: true,
prevArrow : $('.prev'),
nextArrow : $('.next')});
$(".slider").css("opacity", 1);
}, 2000);
});
Run Code Online (Sandbox Code Playgroud)
您可以看到它在jsFiddle上运行。
现在,当我尝试在初始幻灯片的代码中添加一个变量时,初始幻灯片没问题,但是当我单击“下一步”时,我的幻灯片消失或无法正常工作...
尝试例如拇指 7...
这是我的代码:
$(".thumb").click(function(){
var initialslide = $(this).attr("data-number");
$(".slider").show();
setTimeout(function(){
$('.slider').slick({
slidesToShow: 4,
slidesToScroll: 1,
centerMode: true,
initialSlide : initialslide,
infinite: true,
prevArrow : $('.prev'),
nextArrow : $('.next')});
$(".slider").css("opacity", 1);
}, 200);
});
Run Code Online (Sandbox Code Playgroud)
请参阅此jsFiddle以查看其实际效果:如果在幻灯片显示后单击“下一步”,您将看到问题。
我不知道我做错了什么,有人可以帮助我吗?
谢谢