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

时间:2018-08-29 14:18:11

标签: jquery

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

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

2 个答案:

答案 0 :(得分:0)

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

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

答案 1 :(得分:0)

通过以下方法解决此问题:

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