Trouble Linking Unique Thumbnails with Different Sliders using js

Design help Custom code
1

Hi, I’m working on a portfolio site that’s a scrollable page, with many unique sliders. Each unique slider has thumbnails that I want to link to their respective slide. It appears I need to give each slider an ID. Right now, clicking on one thumbnail affects all the sliders on the page. Can this be done in Webflow with the custom code box if I give each slider its own css class? I’ve done a lot of reading, but in my limited js experience, I’m not finding a solution that would work within Webflow. It would be nice to have a generic bit of code that each slider could reference.

I found a similar question posted here (but it appears the OP never implemented a working solution):
https://stackoverflow.com/questions/51367346/how-do-i-let-multiple-sliders-on-one-page-function-separate-from-each-other

This is my first webflow project and my first web project in 20 years so there might definitely is inefficient use of classes and divs in the following links.

Here’s the read-only site:
https://preview.webflow.com/preview/brand-aggregate-javascript?utm_medium=preview_link&utm_source=dashboard&utm_content=brand-aggregate-javascript&preview=9f27d028dc48db73c9d0cbeaac175ad6&mode=preview

Here’s published site:
https://brand-aggregate-javascript.webflow.io/

The code I’m using is thanks to @bartekkustra.
eidt: I’ve only added the js for the first slider, realizing the issue I was up against.

 


$(document).ready(function() {
  $('#hardees-2').click(function(e) {
    e.preventDefault();
    $('.hero-link').removeClass('active');
    $(this).addClass('active');
    $('.w-round div:nth-child(2)').trigger('tap');
  });
  $('#hardees-3').click(function(e) {
    e.preventDefault();
    $('.hero-link').removeClass('active');
    $(this).addClass('active');
    $('.w-round div:nth-child(3)').trigger('tap');
  });
   $('#hardees-4').click(function(e) {
    e.preventDefault();
    $('.hero-link').removeClass('active');
    $(this).addClass('active');
    $('.w-round div:nth-child(4)').trigger('tap');
  });
   $('#hardees-5').click(function(e) {
    e.preventDefault();
    $('.hero-link').removeClass('active');
    $(this).addClass('active');
    $('.w-round div:nth-child(5)').trigger('tap');
  });
});

Thanks to anyone who takes a look. I’m so humbled by everyone’s prowess on here.

Maybe I should have used tabs! I like the swipeable feature of sliders…
-Abby