Как реализовать простую навигацию слайдера?

Question

[rak123]

Есть самый простой слайдер, для него нужно сделать стандартную навигацию из списка точек. У меня получилось сделать динамически создаваемый список по числу слайдов, но как связать каждый слайд с соответствующей точкой? Эти 2 класса active-slide и 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

[Николай]

Если пишете сами, то вам нужно собрать массив из элементов. Далее, вам нужно сопоставить элементы из первого массива со вторым. И следовательно определять, если нажали на первый элемент в slider, то ставим active у первого элемента в navigation. И так далее.

Можно использовать плагин owlSlider
Вот пример с точками