Streaming live at 10am (PST)

Help needed with custom slider buttons

I read a post regarding linking buttons to specific slides in the slider. A response from “bartekkustra” offered a custom code option to enable. While his code notes the selected button “active” (and it brilliantly goes to the correct slide), if arrows or swipe gestures are used advance the slider, the “active” button doesn’t respond.

Is there any modifications that can be made to cause the button to respond as active? Please be gentle, I’m a bricks and mortar architect, not code understanding!

<script>
$(document).ready(function() {
  $('#one').click(function(e) {
    e.preventDefault();
    $('.range-link').removeClass('active');
		$(this).addClass('active');
    $('.w-round div:nth-child(1)').trigger('tap');
  });
  $('#two').click(function(e) {
    e.preventDefault();
    $('.w-round div:nth-child(2)').trigger('tap');
    $('.range-link').removeClass('active');
		$(this).addClass('active');
  });
  $('#three').click(function(e) {
    e.preventDefault();
    $('.range-link').removeClass('active');
		$(this).addClass('active');
    $('.w-round div:nth-child(3)').trigger('tap');
  });
});
</script>

Here’s a link to the read only, code is buried in the “before body” in the page settings:

https://preview.webflow.com/preview/vht?utm_medium=preview_link&utm_source=designer&utm_content=vht&preview=198b9b5a0d3b213b7a7b5368ae76fe61&mode=preview


Here is my site Read-Only: LINK
(how to share your site Read-Only link)