How to implement simple slider navigation?

Question

JavaScript

There is the simplest slider, for it you need to make a standard navigation from a list of points. I managed to make a dynamically created list by the number of slides, but how to connect each slide to the corresponding point? Are these 2 classes active-slide and active-dot?

<ul class="slider">
  <li class="slide active-slide"><img></li>
  <li class="slide"><img></li>
  <li class="slide"><img></li>
  <li class="slide"><img></li>
  <li class="slide"><img></li>
</ul>
<ul class="navigation-slider">
  <li class="slide-dot active-dot"></li>
  <li class="slide-dot"></li>
  <li class="slide-dot"></li>
  <li class="slide-dot"></li>
  <li class="slide-dot"></li>
</ul>

Answer 1

If you write yourself, then you need to collect an array of elements. Next, you need to match the elements from the first array with the second. And therefore, to determine if the first element in the slider is clicked, then we set active at the first element in navigation. Etc.
You can use the owlSlider plugin
Here is an example with dots