Use Javascript to assign a class (OnClick)

[Hunter_Reynolds]

Hello, Webflow community! I’m working on a website where I’ve created a custom slider that advances after clicking on a custom div element

See this link for reference:
http://slider-changer.webflow.io/

Original Post:

Is it possible to link to a specific slide in a slider?

Will all this work after exporting the code out of WF? Because I have done everything and it is not working for me. You published sample is not working: http://slider-changer.webflow.com/51

I’ve figured out how to make the code work for a single class element to change, but I want to be able to apply an additional class onClick for the bullet element as well as the text. Here’s my example:

https://fortebev.webflow.io/#bottles

The code works in that it searches for an element with an ID of ‘heroslide1’, or 2, or 3, and so on… and adds an ‘active’ class to the element for unique styling, while also linking to the slide. I’m wondering how to also add an ‘active’ class to the bullet points as well so that they behave similarly to the text color change.

<script>
$(document).ready(function() {
  $('#heroslide1').click(function(e) {
    e.preventDefault();
    $('.hero-link').removeClass('active');
    $(this).addClass('active');
		$(this).children('hero-bullet').removeClass('active');
		$(this).children('hero-bullet').addClass('active');
		$('.w-round div:nth-child(1)').trigger('tap');
  });
  $('#heroslide2').click(function(e) {
    e.preventDefault();
    $('.hero-link').removeClass('active');
    $(this).addClass('active');
		$(this).children('hero-bullet').removeClass('active');
		$(this).children('hero-bullet').addClass('active');
    $('.w-round div:nth-child(2)').trigger('tap');
  });
  $('#heroslide3').click(function(e) {
    e.preventDefault();
    $('.hero-link').removeClass('active');
    $(this).addClass('active');
		$(this).children('hero-bullet').removeClass('active');
		$(this).children('hero-bullet').addClass('active');
    $('.w-round div:nth-child(3)').trigger('tap');
  });
  $('#heroslide4').click(function(e) {
    e.preventDefault();
    $('.hero-link').removeClass('active');
    $(this).addClass('active');
		$(this).children('hero-bullet').removeClass('active');
		$(this).children('hero-bullet').addClass('active');
    $('.w-round div:nth-child(4)').trigger('tap');
  });
});
</script>>

---

Here is my site Read-Only: https://preview.webflow.com/preview/fortebev?utm_medium=preview_link&utm_source=designer&utm_content=fortebev&preview=1c26875c1770d08dfdc207c683d4e896&mode=preview