Change slides on button click outside the slider element

Design help Custom code
1

Hi,
I need help with slider in Webflow. I want to change the slides when user click on specific buttons outside the slider element.

The code I find on forum was working first but next day without any changes the code is not working. I don’t know why. Maybe it is something I am doing wrong. Please help me regarding this issue.

Live Site:
https://pentimento-c6cc73.webflow.io/product-landing

Script(also attached) and slider are added on product landing page. I want the buttons at starting of page to click and change the slides accordingly.

Here is my site Read-Only: LINK

<script>
$(document).ready(function() { 
  $('#tshirt').click(function(e) {
    e.preventDefault();
    $('#slide-2, #slide-3').removeClass('active');
    $('#slide-1').addClass('active');
    $('.w-round div:nth-child(1)').trigger('tap');
  });
  $('#masker').click(function(e) {
    e.preventDefault();
    $('#slide-1, #slide-3').removeClass('active');
    $('#slide-2').addClass('active');
		$('.w-round div:nth-child(2)').trigger('tap');
  });
  $('#totebag').click(function(e) {
    e.preventDefault();
    $('#slide-2, #slide-1').removeClass('active');
    $('#slide-3').addClass('active');
    $('.w-round div:nth-child(3)').trigger('tap');
  });
});
</script>
2

For any one who wants to know, I fixed the issue. I was using wrong class → w-round whereas I should have used w-slider.

this is correct one.
$('.w-slider div:nth-child(1)').trigger('tap');

1 Like