gpt4 book ai didi

javascript - Slick Slider 多个 slider 保持事件位置

转载 作者:行者123 更新时间:2023-11-29 21:06:50 24 4
gpt4 key购买 nike

我在一页上有多个 Slick Sliders。每个 slider 都有一个缩略图 Nav。问题是 slider 使用以前的当前位置而不是从第一个缩略图开始。

我猜我需要一种动态添加 id 的方法,这样它们就不会相互影响。 (我的 JS 知识很基础)

  $('.slider-products').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.slider-nav'
});


var windowWidth = $(window).width();
if(windowWidth <= 800) {
$('.slider-nav').slick({
vertical: false,
slidesToShow: 4,
slidesToScroll: 1,
asNavFor: '.slider-products',
arrow: false,
focusOnSelect: true
});
}
else {
$('.slider-nav').slick({
vertical: true,
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.slider-products',
focusOnSelect: true
});
}

最佳答案

  1. 使用the .each method绕过所有 slider 。
  2. 通过 the .addClass method 为每对 slider 添加一个编号类.
  3. 使用the responsive option根据屏幕宽度更改设置。

请检查结果:https://codepen.io/glebkema/pen/bWRZzB

var numSlick = 0;
$('.slider-products').each( function() {
numSlick++;
$(this).addClass( 'slider-' + numSlick ).slick({
arrows: false,
asNavFor: '.slider-nav.slider-' + numSlick,
fade: true,
slidesToScroll: 1,
slidesToShow: 1,
});
});

numSlick = 0;
$('.slider-nav').each( function() {
numSlick++;
$(this).addClass( 'slider-' + numSlick ).slick({
arrow: false,
asNavFor: '.slider-products.slider-' + numSlick,
focusOnSelect: true,
slidesToScroll: 1,
slidesToShow: 4,
responsive: [
{
breakpoint: 800,
settings: {
slidesToShow: 3,
}
}
]
});
});
.slick-arrow {
display: none !important; /* `arrows: false;` is not enough to prevent horizontal scrolling */
}
.slick-slide {
background: #c69;
border: 2px solid #fff;
color: #fff;
font-size: 36px;
font-weight: bold;
outline: none; /* prevent the appearance of a tiny gray contour */
padding: 18px 0;
text-align: center;
}
.slider:nth-of-type(n+3) .slick-slide { background: #9c6; }
.slider:nth-of-type(n+5) .slick-slide { background: #69c; }
.slider-nav {
margin-bottom: 12px;
}
.slider-nav .slick-slide:hover {
cursor: pointer;
opacity: .7;
}
<div class="slider slider-products">
<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>
<div class="slider slider-nav">
<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>

<div class="slider slider-products">
<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>
<div class="slider slider-nav">
<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>

<div class="slider slider-products">
<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>
<div class="slider slider-nav">
<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>

关于javascript - Slick Slider 多个 slider 保持事件位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43630791/

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