我正在使用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');
});
这不太正确,因为在您滚动浏览时会在每个链接中添加一个活动类。
答案 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');
});