Sick Slider：使用链接转到幻灯片并标记活动链接 [英] Slick Slider: Go to slide with link and mark active links

问题描述

我要使用链接转到滑块中的特定幻灯片。

目前我使用以下代码(您可以在此处看到：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);
 });

跳过某个幻灯片效果很好。 但我需要将导航中的当前幻灯片标记为活动的，并向链接添加一个类.active。

这可能吗？

我知道有一种类似于滑块与asNavFor同步的东西。但我不能在我的情况下使用它。

推荐答案

您可以在单击这些导航项目时添加活动类。 您可以在这里看到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');
 });

这篇关于Sick Slider：使用链接转到幻灯片并标记活动链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！