Question

我正在使用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');
});

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

Answer 1

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

CAST(CAST(CustomProperties AS xml).query('ArrayOfCustomProperty/CustomProperty/Key[text()="LocationId"]/../Value/text()') AS nvarchar)

Answer 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');
});

光滑的滑块：在相应的幻灯片上突出显示文本链接

2 个答案: