javascript - Slick Slider - Applying slick active class to <a> according to active slide -
im trying add 'slick active' class tag when slide has been dragged. class applied on click cant work out how apply other!
any deciphering code appreciated!
js
$(document).ready(function() { var $slideshow = $(".slider").slick({ dots: false, infinite: true, speed: 300, slidestoshow: 1, adaptiveheight: true, swipetoslide: true, touchthreshold: 3, arrows: false }); $('.links').on('click', 'a', function( e ) { var slideindex = $(this).closest('li').index(); $slideshow.slick( 'slickgoto', parseint( slideindex ) ); $('.links li a').removeclass('slick-current'); $(this).addclass('slick-current'); e.preventdefault(); }); $('.slider').on('afterchange', function(event,slick,i) { $('.links li .slick-slide').removeclass('slick-current'); $('.links li .slick-slide').eq(i).addclass('slick-current'); }); $('.links li .slick-slide').eq(0).addclass('slick-current'); });
html
<div class="large-3 columns page-content-left"> <ul class="links"> <li><a href="#">slide1</a></li> <li><a href="#">slide2</a></li> <li><a href="#">slide3</a></li> </ul> </div> <div id="" class="large-9 columns page-content-right"> <section class="slider" id="slider1"> <div class="slide"> </div> <div class="slide"> </div> <div class="slide"> </div> </section> </div>
you have add class slick-initialized
links
.
we don't have html should this:
<div class="links slick-initialized"> <li><a><span class="slick-slide">1</span></a></li> <li><a><span class="slick-slide">2</span></a></li> <li><a><span class="slick-slide">3</span></a></li> </div>
update
now have html it's clear why still have problem. set class $('.links li .slick-slide')
. matches code above, you, however, have different structure.
<ul class="links"> <li><a href="#">slide1</a></li> <li><a href="#">slide2</a></li> <li><a href="#">slide3</a></li> </ul>
first have change
<ul class="links slick-initialized"> <li><a href="#" class="slick-slide">slide1</a></li> <li><a href="#" class="slick-slide">slide2</a></li> <li><a href="#" class="slick-slide">slide3</a></li> </ul>
and second change jquery $('.links li a.slick-slide')
(space removed between a
, .slick-slide
).
Comments
Post a Comment