Streaming live at 10am (PST)

Use Javascript to assign a class (OnClick)

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:

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: Webflow - fortebev