CODEWITHSUNDEEP
javascriptjquerycsssliderslick.js
Cray
Cray

Reputation: 5483

Slick Slider: Go to slide with link and mark active links

I want to use a link to go to a certain slide inside a slick slider.

At the moment I'm using the following code for that (You can see it here: https://codepen.io/cray_code/pen/xxPRLKK):

<div class="slider slider-for">
    <div><h3>1</h3></div>
    <div><h3>2</h3></div>
    <div><h3>3</h3></div>
    <div><h3>4</h3></div>
    <div><h3>5</h3></div>
  </div>
  <div class="action">
    <a href="#" data-slide="3">go to slide 3</a>
    <a href="#" data-slide="4">go to slide 4</a>
    <a href="#" data-slide="5">go to slide 5</a>
  </div>

And this JS code:

 $('.slider').slick({
   slidesToShow: 1,
   slidesToScroll: 1,
   arrows: false,
   fade: true,
 });

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

It works fine to jump do a certain slide. But I need to mark the current slide inside the navigation as active and add a class .active to the link.

Is that possible?

I know that there is a thing like slider syncing with asNavFor. But I can't use that in my case.

Upvotes: 0

Views: 4843

Answers (1)

Sifat Haque
Sifat Haque

Reputation: 6057

You can add an active class when clicking on those nav items. You can see it here https://codepen.io/sifat009/pen/VwrmzPm

Here is the code i've changed.

 $('.slider').slick({
   slidesToShow: 1,
   slidesToScroll: 1,
   arrows: false,
   fade: true,
 });

 $('a[data-slide]').click(function(e) {
   e.preventDefault();
   var slideno = $(this).data('slide');
   $('.slider').slick('slickGoTo', slideno - 1);
   $('a[data-slide]').removeClass('active');
   this.classList.add('active');
 });

Upvotes: 1

Related Questions