我目前正在使用Slick Slider,该导航器用于浏览访问者的功能列表。它使用asNavFor
来导航两个不同的元素,顶部的标签和实际内容都是div。设置非常简单,它来自我几个月前购买的高级模板:
index.html
<div class="features features--slider-2 pt-100 mt-xl-5">
<div class="container">
<div class="row">
<div class="col-12">
<div class="slider slider-tabs mb-20">
<div class="slide"><button class="slider-tab">Slide 1</button></div>
<div class="slide"><button class="slider-tab">Slide 2</button></div>
<div class="slide"><button class="slider-tab">Slide 3</button></div>
<div class="slide"><button class="slider-tab">Slide 4</button></div>
<div class="slide"><button class="slider-tab">Slide 5</button></div>
<div class="slide"><button class="slider-tab">Slide 6</button></div>
</div>
<div class="slider slider-contents">
<div class="slide">
<p>Slide 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis maximus bibendum urna suscipit laoreet. Aliquam accumsan, eros vitae vulputate fringillaLorem ipsum dolor sit amet, consectetur adipiscing elit. Duis maximus bibendum urna suscipit laoreet. Aliquam accumsan, eros vitae vulputate fringilla.</p>
</div>
<div class="slide">
<p>Slide 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis maximus bibendum urna suscipit laoreet. Aliquam accumsan, eros vitae vulputate fringillaLorem ipsum dolor sit amet, consectetur adipiscing elit. Duis maximus bibendum urna suscipit laoreet. Aliquam accumsan, eros vitae vulputate fringilla.</p>
</div>
<div class="slide">
<p>Slide 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis maximus bibendum urna suscipit laoreet. Aliquam accumsan, eros vitae vulputate fringillaLorem ipsum dolor sit amet, consectetur adipiscing elit. Duis maximus bibendum urna suscipit laoreet. Aliquam accumsan, eros vitae vulputate fringilla.</p>
</div>
<div class="slide">
<p>Slide 4. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis maximus bibendum urna suscipit laoreet. Aliquam accumsan, eros vitae vulputate fringillaLorem ipsum dolor sit amet, consectetur adipiscing elit. Duis maximus bibendum urna suscipit laoreet. Aliquam accumsan, eros vitae vulputate fringilla.</p>
</div>
<div class="slide">
<p>Slide 5. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis maximus bibendum urna suscipit laoreet. Aliquam accumsan, eros vitae vulputate fringillaLorem ipsum dolor sit amet, consectetur adipiscing elit. Duis maximus bibendum urna suscipit laoreet. Aliquam accumsan, eros vitae vulputate fringilla.</p>
</div>
<div class="slide">
<p>Slide 6. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis maximus bibendum urna suscipit laoreet. Aliquam accumsan, eros vitae vulputate fringillaLorem ipsum dolor sit amet, consectetur adipiscing elit. Duis maximus bibendum urna suscipit laoreet. Aliquam accumsan, eros vitae vulputate fringilla.</p>
</div>
</div>
</div>
</div>
</div>
</div>
js.js
function featuresSlider2() {
$(".features--slider-2 .slider-tabs").slick({
slidesToShow: 5,
slidesToScroll: 1,
asNavFor: '.features--slider-2 .slider-contents',
dots: false,
arrows: false,
centerMode: false,
focusOnSelect: true,
responsive: [{
breakpoint: 500,
settings: {
slidesToShow: 2,
}
},
{
breakpoint: 992,
settings: {
slidesToShow: 3,
}
},
]
});
$(".features--slider-2 .slider-contents").slick({
slidesToShow: 1,
slidesToScroll: 1,
autoplay: false,
asNavFor: '.features--slider-2 .slider-tabs',
prevArrow: '<button type="button" class="slick-prev"><i class="icon icon-triangle-left-18 icon-color-white"></i></button>',
nextArrow: '<button type="button" class="slick-next"><i class="icon icon-triangle-right-17 icon-color-white"></i></button>',
});
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
$(e.target).find('.slider').each(function () {
$(this).slick('setPosition');
})
})
}
featuresSlider2();
这完全按预期工作。但是,在我的index.html中,我还有一个图像文件,该文件显示在滑块左侧:
<div class="col-12 col-md-5 offset-md-1 offset-xl-0 col-xl-6 z-index2 reveal">
<picture id="featuresImages" class="device-image"><img src="img/image-1.png" alt="mobile"></picture>
</div>
当访客通过滑块滑动时,我想更改图像。因此,如果我在幻灯片1上,我想显示image-1.png,如果我在幻灯片2上,我想将图像更改为image-2.png,依此类推。我通过添加第三个.slick实例并将类添加到asNavFor
来尝试了所有可能想到的事情,但是我无法成功。我最终将所有图像显示在彼此下面,并且在滑动时什么也不做。
有关如何实现此目标的任何建议或教程?