Всем привет. Подскажите, пожалуйста, как решить следующую задачу.
Есть следующая разметка.
<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/
Могли бы вы мне подсказать как правильно реализовать данную задачу?
