@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>
  • Вопрос задан
  • 101 просмотр
Пригласить эксперта
Ответы на вопрос 1
@7rows
Frontend Разработчик / Vue / JS / TS / CSS
Если пишете сами, то вам нужно собрать массив из элементов. Далее, вам нужно сопоставить элементы из первого массива со вторым. И следовательно определять, если нажали на первый элемент в slider, то ставим active у первого элемента в navigation. И так далее.

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы