Active State Applied to Button w/ Custom Slider Trigger?

[simeoned]

Hey guys,

If I use a cust attribute on a button to trigger a slider: data-x-slide-goto="3" for example, can I make the active state of that button be applied when the corresponding slide is active? If I click on the second slide’s button, that one should then become active.

Basically, the same thing that the default pagination element is doing but applied to my custom triggers. Thanks for any guidance on this.

[prakash_s]

Hello @simeoned,

Thanks for writing to us.

Regretfully there is no options to active the button when the corresponding slide is active, you can only trigger the slide using this data-x-slide-goto attributes.It would require custom development. I would suggest you please get in touch with a developer who can assist you with your concerns or you may subscribe to One where customization questions are answered. Please note we don’t provide custom development support it is out of the support scope.

Thanks for understanding.

[oriol]

Looks like we are working on something similar…https://stg-newsiemonster-siemonster.kinsta.cloud/solution/

so I used a button on the left to trigger the slides on the right, and added this JS in the page js:

const buttons = document.querySelectorAll('.x-anchor');

buttons.forEach(button => {
  button.addEventListener('click', function() {
    // Remove 'active' class from all buttons
    buttons.forEach(btn => btn.classList.remove('active'));

    // Add 'active' class to the clicked button
    this.classList.add('active');
  });
});

[tristup]

Hi @simeoned,

Please let us know if the solution given by Oriol works for you.

Thanks