How to automatically change link styles in Url Hash Navigation owl carousel?

Question

css

Hello!
Maybe I'm not doing it the right way, but still.
The bottom line is that I need to change styles when switching slides to link this slide here is a pen with an example - codepen . Now when you click on step1, step2, step3, the corresponding slide appears, everything is fine. But, if I do not click on these links and the slides change automatically, the links themselves remain unchanged, and I am trying to ensure that, for example, on the 2nd slide, the step2 link is highlighted and so on.
I thought about how to implement this by adding a class to the link when changing the slide, but so far it hasn’t worked out in any way ..

Answer 1

Wrapping your links in a block

<div id="demos-link">
  <a class="slide_button1" href="#slide1">Step1</a>
  <a class="slide_button2" href="#slide2">Step2</a>
  <a class="slide_button3" href="#slide3">Step3</a>
</div>

Add the line to the carousel initialization parameters ... Now the .active class will be added to the link to the active slide, you can use it for styling.

Answer 2

The method works if there are only three links, if there are more, then it does not work. Here is a better way