如何解决在一页上使用多个Slick幻灯片
我是Web开发的初学者,作为年终项目的一部分,我必须创建一个网站。
这是我的问题: 在我的主页上,我使用Slick制作了3个滑块,它们完全相同。当我只放入一个时,效果很好。但是,一旦我将它们复制为3个滑条,这些滑条和箭头便不再起作用,而是在另一个滑条上起作用。
所以我的问题是如何分别使用3个滑块?
这是我的HTML
<div class="page-wrapper">
<div class="post-slider">
<h2 class="slider-title">Activités aquatiques</h2>
<i class="fas fa-chevron-left prev"></i>
<i class="fas fa-chevron-right next"></i>
<div class="post-wrapper">
<div class="post">
<h3>Jet-ski</h3>
<img src="" alt="" class="slider-image" />
<div class="post-info">
<p>
Lorem ipsum dolor sit amet consectetur,adipisicing elit. Molestias,officiis dolore labore ipsa perspiciatis inventore eos,ex laborum quis,veniam repellat nobis voluptatibus consequuntur modi nam debitis?
Necessitatibus,ea voluptate?
</p>
</div>
</div>
<div class="post">
<h3>Jet-ski</h3>
<img src="" alt="" class="slider-image" />
<div class="post-info">
<p>
Lorem ipsum dolor sit amet consectetur,ea voluptate?
</p>
</div>
</div>
<div class="post">
<h3>Jet-ski</h3>
<img src="" alt="" class="slider-image" />
<div class="post-info">
<p>Lorem ipsum dolor sit amet consectetur,officiis dolore</p>
</div>
</div>
<div class="post">
<h3>Jet-ski</h3>
<img src="" alt="" class="slider-image" />
<div class="post-info">
<p>Lorem ipsum dolor sit amet consectetur,officiis dolore</p>
</div>
</div>
</div>
</div>
</div>
<div class="page-wrapper">
<div class="post-slider">
<h2 class="slider-title">Activités aquatiques</h2>
<i class="fas fa-chevron-left prev"></i>
<i class="fas fa-chevron-right next"></i>
<div class="post-wrapper">
<div class="post">
<h3>Jet-ski</h3>
<img src="" alt="" class="slider-image" />
<div class="post-info">
<p>
Lorem ipsum dolor sit amet consectetur,officiis dolore</p>
</div>
</div>
</div>
</div>
</div>
这是我的JS:
$('.post-wrapper').slick({
slidesToShow: 3,slidesToScroll: 1,autoplay: false,nextArrow: $('.next'),prevArrow: $('.prev'),});
谢谢。
解决方法
这应该有效:
用ID替换类选择器.post-wrapper
:
$('#slideshow1').slick({...});
$('#slideshow2').slick({...});
$('#slideshow3').slick({...});
请注意,您需要为每个幻灯片放映单独的幻灯片。 (现在,您甚至可以为每个选项设置不同的选项,是的!)
不要忘记分配这些ID:
<div class="post-wrapper" id="slideshow1"> ... </div>
<div class="post-wrapper" id="slideshow2"> ... </div>
<div class="post-wrapper" id="slideshow3"> ... </div>
对您进行网络开发的最大祝愿:-)
,我找到了问题。
我不得不更改<i>
上的.next和.prev类,并在每个滑块上放置不同的名称,并在js中进行相同的操作。
$('#slideshow1').slick({
slidesToShow: 3,slidesToScroll: 1,autoplay: false,nextArrow: $('.next1'),prevArrow: $('.prev1'),});
$('#slideshow2').slick({
slidesToShow: 3,nextArrow: $('.next2'),prevArrow: $('.prev2'),});
$('#slideshow3').slick({
slidesToShow: 3,nextArrow: $('.next3'),prevArrow: $('.prev3'),});
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。