Slick Slider:使用 link 转到幻灯片并标记为活动 links
Slick Slider: Go to slide with link and mark active links
我想使用 link 转到光滑滑块内的特定幻灯片。
目前我正在为此使用以下代码(您可以在此处查看:https://codepen.io/cray_code/pen/xxPRLKK):
<div class="slider slider-for">
<div><h3>1</h3></div>
<div><h3>2</h3></div>
<div><h3>3</h3></div>
<div><h3>4</h3></div>
<div><h3>5</h3></div>
</div>
<div class="action">
<a href="#" data-slide="3">go to slide 3</a>
<a href="#" data-slide="4">go to slide 4</a>
<a href="#" data-slide="5">go to slide 5</a>
</div>
而这段 JS 代码:
$('.slider').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
});
$('a[data-slide]').click(function(e) {
e.preventDefault();
var slideno = $(this).data('slide');
$('.slider').slick('slickGoTo', slideno - 1);
});
跳转某张幻灯片效果很好。
但我需要将导航中的当前幻灯片标记为活动状态,并将 class .active
添加到 link.
这可能吗?
我知道滑块与 asNavFor
同步。但我不能在我的情况下使用它。
您可以在单击这些导航项时添加活动 class。
你可以在这里看到它 https://codepen.io/sifat009/pen/VwrmzPm
这是我修改过的代码。
$('.slider').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
});
$('a[data-slide]').click(function(e) {
e.preventDefault();
var slideno = $(this).data('slide');
$('.slider').slick('slickGoTo', slideno - 1);
$('a[data-slide]').removeClass('active');
this.classList.add('active');
});
我想使用 link 转到光滑滑块内的特定幻灯片。
目前我正在为此使用以下代码(您可以在此处查看:https://codepen.io/cray_code/pen/xxPRLKK):
<div class="slider slider-for">
<div><h3>1</h3></div>
<div><h3>2</h3></div>
<div><h3>3</h3></div>
<div><h3>4</h3></div>
<div><h3>5</h3></div>
</div>
<div class="action">
<a href="#" data-slide="3">go to slide 3</a>
<a href="#" data-slide="4">go to slide 4</a>
<a href="#" data-slide="5">go to slide 5</a>
</div>
而这段 JS 代码:
$('.slider').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
});
$('a[data-slide]').click(function(e) {
e.preventDefault();
var slideno = $(this).data('slide');
$('.slider').slick('slickGoTo', slideno - 1);
});
跳转某张幻灯片效果很好。
但我需要将导航中的当前幻灯片标记为活动状态,并将 class .active
添加到 link.
这可能吗?
我知道滑块与 asNavFor
同步。但我不能在我的情况下使用它。
您可以在单击这些导航项时添加活动 class。 你可以在这里看到它 https://codepen.io/sifat009/pen/VwrmzPm
这是我修改过的代码。
$('.slider').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
});
$('a[data-slide]').click(function(e) {
e.preventDefault();
var slideno = $(this).data('slide');
$('.slider').slick('slickGoTo', slideno - 1);
$('a[data-slide]').removeClass('active');
this.classList.add('active');
});