@s24344

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

Всем привет. Подскажите, пожалуйста, как решить следующую задачу.
Есть следующая разметка.
<ul className="list">
  <ul class="list">
  <li class="list__item">1</li>
  <li class="list__item">2</li>
  <li class="list__item">1</li>
  <li class="list__item">2</li>
  <li class="list__item">1</li>
  <li class="list__item">2</li>
  <li class="list__item">1</li>
  <li class="list__item">2</li>
  <li class="list__item">1</li>
  <li class="list__item">2</li>
  <li class="list__item">1</li>
  <li class="list__item">2</li>
  <li class="list__item">1</li>
  <li class="list__item">2</li>
  <li class="list__item">1</li>
  <li class="list__item">2</li>
  <li class="list__item">1</li>
  <li class="list__item">2</li>
  <li class="list__item">1</li>
  <li class="list__item">2</li>
  <li class="list__item">1</li>
  <li class="list__item">2</li>
  <li class="list__item">1</li>
  <li class="list__item">2</li>
  <li class="list__item">1</li>
  <li class="list__item">2</li>
  <li class="list__item">1</li>
  <li class="list__item">2</li>
  <li class="list__item">1</li>
  <li class="list__item">2</li>
  <li class="list__item">1</li>
  <li class="list__item">2</li>
</ul>

.list {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}

.list__item {
  display: inline-block;
  width: 300px;
  height: 300px;
  margin: 10px;
  background: #e88565;
}

Идея в том, чтобы можно было использовать горизонтальную прокрутку, но не нативным скроллом, а слайдером, например вот этим:
https://refreshless.com/nouislider/
Могли бы вы мне подсказать как правильно реализовать данную задачу?
  • Вопрос задан
  • 226 просмотров
Пригласить эксперта
Ответы на вопрос 2
ruvasik
@ruvasik
https://www.bryce.ru
  1. Подключить скрипт слайдера
  2. Подключить стили слайдера
  3. Инициализировать слайдер с элементом .list
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

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