gpt4 book ai didi

javascript - 具有多行的 jQuery 光滑 slider 不起作用

转载 作者:行者123 更新时间:2023-11-29 17:42:00 24 4
gpt4 key购买 nike

我想为基本 slider 设置两行图像。我正在使用 Slick Slider,但即使我按照他们的说明进行操作,它似乎也无法正常工作。我做错了什么?

这是 Slick Slider JS 网站的链接: http://kenwheeler.github.io/slick/

我的 HTML:

<div class="carousel">
<img src="https://cdn2.hubspot.net/hub/482618/hubfs/demo-logo.png">
<img src="https://cdn2.hubspot.net/hub/482618/hubfs/demo-logo.png">
<img src="https://cdn2.hubspot.net/hub/482618/hubfs/demo-logo.png">
<img src="https://cdn2.hubspot.net/hub/482618/hubfs/demo-logo.png">
<img src="https://cdn2.hubspot.net/hub/482618/hubfs/demo-logo.png">
<img src="https://cdn2.hubspot.net/hub/482618/hubfs/demo-logo.png">
</div>

我的JS:

$(document).ready(function(){
$('.carousel').slick({
dots: true,
slidesPerRow: 3,
rows: 2,
responsive: [
{
breakpoint: 1024,
settings: {
slidesPerRow: 2,
rows: 1,
}
},
{
breakpoint: 640,
settings: {
slidesPerRow: 1,
rows: 1,
}
}
]
});
});

我创建了一个 fiddle : https://jsfiddle.net/zts1nok8/

最佳答案

我认为您可以通过包装图像并使用一些简单的 CSS 来实现您想要的效果。

HTML:

<div class="carousel">
<div class="carouselItem">
<img src="https://cdn2.hubspot.net/hub/482618/hubfs/demo-logo.png">
<img src="https://cdn2.hubspot.net/hub/482618/hubfs/demo-logo.png">
<img src="https://cdn2.hubspot.net/hub/482618/hubfs/demo-logo.png">
</div>
<div class="carouselItem">
<img src="https://cdn2.hubspot.net/hub/482618/hubfs/demo-logo.png">
<img src="https://cdn2.hubspot.net/hub/482618/hubfs/demo-logo.png">
<img src="https://cdn2.hubspot.net/hub/482618/hubfs/demo-logo.png">
</div>
</div>

CSS:

.carouselItem{
width:100%;
text-align:center;
}
.carouselItem img{
display:inline-block;

}

如果你这样做,你可能想要删除所有关于 slick 配置中的行的东西。老实说,这似乎被窃听了。您可以将问题发送给开发人员。

为了响应,您可以使用 CSS 媒体查询和隐藏/显示正确的图像来做一些事情。如果您在每张幻灯片中使用同一张图片三次,这种方法效果最好。

在这里查看 JSFiddle:https://jsfiddle.net/Chipmo/0u8g9aLt/2/

关于javascript - 具有多行的 jQuery 光滑 slider 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52536479/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com