Slick Slider：在相应幻灯片上突出显示文本链接答案

【问题标题】：Slick Slider: Highlighting text links when on the corresponding slideSlick Slider：在相应幻灯片上突出显示文本链接
【发布时间】：2018-08-29 23:58:02
【问题描述】：

我正在使用Slick Slider 创建一个带有一些自定义导航的轮播。我有一组文本链接，单击这些链接会使滑块滑动到相应的幻灯片。效果很好。

我也想让相反的情况发生，所以当用户使用滑块上的箭头导航时，它会突出显示相应的文本链接。我怎样才能做到这一点？有没有办法使用滑块的活动data-slide 来突出显示相应的链接？

到目前为止，这是我的代码：

jquery：

$('.category-gallery').slick({
    dots: false,
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 1,
    autoplay: false,
    pauseOnHover:false,
    focusOnSelect: false,
    centerMode:true,
    arrows: true,
});

$('a.category-nav[data-slide]').click(function(e) {
    e.preventDefault();
    var slideno = $(this).data('slide');
    $('.category-gallery').slick('slickGoTo', slideno - 1);
});

这会为导航创建一组链接：

<div class="category-links">
  <?php $counter = 1; ?>
  <section class="row category-term-list" data-equalizer>
  <?php foreach ( $pages as $post ) : setup_postdata( $post ); ?>
    <div class="columns medium-2 text-center" data-equalizer-watch>
      <a class="category-nav" data-slide="<?php echo $counter; ?>" href="#"><?php echo the_title(); ?></a>
    </div>
  <?php $counter++; ?>
  <?php endforeach; ?>
  </section>
  <?php wp_reset_postdata();?>
</div>

这将创建轮播：

  <?php if( have_rows( 'gallery' ) ): ?>
            <?php while( have_rows( 'gallery' ) ): the_row(); ?>
                <?php $image = get_sub_field( 'image' );
      $icon = get_field( 'product_icon' ); ?>
                <a href="#" class="slide" data-open="gallery-modal-<?php echo $counter; ?>">
                    <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>">
                    <?php if($icon) { ?><img src="<?php echo $icon['url']; ?>" alt="<?php echo $icon['alt']; ?>"><?php } ?>
                </a>
            <?php break;
    endwhile; ?>
        <?php endif; ?>

这是我的尝试：

$('.category-gallery').on('afterChange', function(event, slick, currentSlide, nextSlide){
  $('a.category-nav[data-slide=' + (currentSlide + 1) + ']').addClass('active');
});

这不太对，因为它会在您滚动浏览时为每个链接添加一个活动类。

【问题讨论】：

标签： jquery

【解决方案1】：

只需将此事件处理程序添加到您的代码中，它就会返回当前幻灯片的 ID。

$('.category-gallery').on('beforeChange', function(event, slick, currentSlide, nextSlide){
    $("#text-link-number-" + currentSlide).addClass("active");
});

【讨论】：

为了我正确理解这一点，我在我的 jquery 下添加了该代码块，但似乎没有任何反应。这是在尝试向幻灯片添加一个活动类吗？
这会在您的文本链接中添加一个类（活动的，您已经在 css 中提到过）
我已经用修改后的代码更新了我的问题，在我原来的 jquery 块下面添加了它，它似乎没有将任何东西标记为活动。

【解决方案2】：

通过以下方式解决了这个问题：

$('a.category-nav[data-slide="1"]').addClass("highlighted-cat-nav");
$('.category-gallery').on('afterChange', function(event, slick, currentSlide, nextSlide){
    $('a.category-nav').removeClass('highlighted-cat-nav');
  $('a.category-nav[data-slide=' + (currentSlide + 1) + ']').addClass('highlighted-cat-nav');
});

【讨论】：