Adding active class to external button when slick dots pressed

Question

I have a layout which has a slick slider, an image with the image icons on it, to go to a particular slides when clicked. The slick slider has 3 slides, which is working fine.

I have one thing to ask, how can I make the function as two way, as for now when I click on my external buttons, that button gets active and hence sides to the particular slider, but when I click on the slick dots, it doesn't add the active class to the button which I have.

I have used the slickGoTo method, but I'm wondering how can I achieve for this new thing, like when I click on 2nd number slick dots it should add an active class to the 2nd number image icon.

The code I have tried was to add the image icon to the slick init, before setting up, but didn't work out.

$('.box-one').on('init', function(event, slick){
  var $items = slick.$dots.find('li');
  $items.addClass('.img-logo');
});

This is the dummy div which works on the slick slider :

<div>
 <div class='box-one'>
    <div>1st DIV</div>
    <div>2nd DIV</div>
    <div>3rd DIV</div>
 </div>

 <div class='external-icons'>
     <div class='logo-group'>
       <a class='intro-logo-1 active'><img></a>
       <a class='intro-logo-2'><img></a>
       <a class='intro-logo-3'><img></a>
     </div>
 </div>
</div>

PLEASE NOTE : I don't want to remove the slick dots, it is just that, on pressing of the particular number slick dots, the active class should be added to that particular external button.

This is the screenshot of the section, I hope this will make you clear regarding my page layout and work.

I'm hoping with the help of you guys, I will learn new thing and will be able to get to my goal. Thanks

Answer 1

Since the external buttons are not associated with the slider functioning directly, you need to manually listen to the slide change event and cause any external effect (in this case highlight the corresponding external button). I have prepared a demo below.

Regarding your query on eq: $('#external-buttons a') selects all the a tags inside the #external-buttons, so we need to select a single particular a tag. eq takes an index and selects the element on that index from a collection of elements. You can read more about eq here

$('.slick-slider').slick({
dots: true
  });
  
  $('.slick-slider').on('beforeChange', function(event, slick, currentSlide, nextSlide){
  $('#external-buttons a.active').removeClass('active');
  $('#external-buttons a').eq(nextSlide).addClass('active');
});
  
  
$('#external-buttons a').on('click', function(e){
  e.preventDefault();
  $('#external-buttons a.active').removeClass('active');
  $(this).addClass('active');
  var targetSlide = $(this).data('target');
  $('.slick-slider').slick('slickGoTo', targetSlide );
});//click()

#external-buttons a.active{
 background-color: orange;
 color: white;
}

<link href="http://kenwheeler.github.io/slick/slick/slick-theme.css" rel="stylesheet"/>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://kenwheeler.github.io/slick/slick/slick.js"></script>
<link href="http://kenwheeler.github.io/slick/slick/slick.css" rel="stylesheet"/>
<div class="slick-slider">
  <div><img src="http://placekitten.com/300/200" alt="slide 1" /></div>
  <div><img src="http://via.placeholder.com/300x200" alt="slide 2" /></div>
  <div><img src="https://placeimg.com/300/200/any" alt="slide 3" /></div>
</div>


<h3>External buttons</h3>
<div id="external-buttons">
  <a data-target="0">Slide 1</a>
  <a data-target="1">Slide 2</a>
  <a data-target="2">Slide 3</a>
 </div>

Answer 2

I attacked this a different way by selecting the separate nodes for each dot by attaching a variable id using dot notation and then force a click event on the image you want to show and it works a treat.

Amendments to be added to your main.js folder or slick control statement folder underneath the statement.

I isolated to a viewport > 591 as for mobile it was working fine for us but not on desktop or IPAD Pro.

// slick product images

$('.product-single__photos').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows:false,
    centerMode: true,
    fade: true,
    dots: true,
    fade:true,
    asNavFor: '.product-single__thumbnails'
});

$('.product-single__thumbnails').slick({
    slidesToShow: 3,
    slidesToScroll: 1,
    asNavFor: '.product-single__photos',
    //centerMode: true,
    // focusOnSelect: true,
    arrows: true
});

// force a click event so when the dot is clicked the image changes for desktop users.

if (window.innerWidth > 591) { 
    const sldot = document.querySelector('.slick-dotted > ul');

    sldot.addEventListener('click', (e) => {
        let dotClicked = e.target;


        if(dotClicked.id == "slick-slide-control01") {

            document.querySelector("#ProductThumbs > div > div > div.slick-slide.slick-current.slick-active > div > a > img").click();
        }else if(dotClicked.id == "slick-slide-control02") {
            document.querySelector("#ProductThumbs > div > div > div:nth-child(3) > div > a > img").click();
        }else if(dotClicked.id == "slick-slide-control00") {
            document.querySelector("#ProductThumbs > div > div > div:nth-child(1) > div > a > img").click();
        }else;
    });
}

All working fine now on our Shopify website.