Коллеги, я Вас категорически приветствую!
Помогите советом. На странице (верстка уже готова) необходимо реализовать слайдер, в трех местах с разным контентом. Верстку подготовил следующим образом
<div class="services__carousel slider">
<button class="slider-arrow left" name="previos offer">Влево</button>
<ul class="carousel-list slider-list">
<li class="carousel-item slider-item">Контент 1</li>
<li class="carousel-item slider-item">Контент 2</li>
<li class="carousel-item slider-item">Контент 3</li>
<li class="carousel-item slider-item">Контент 4</li>
<li class="carousel-item slider-item">Контент 5</li>
<li class="carousel-item slider-item">Контент 6</li>
<li class="carousel-item slider-item">Контент 7</li>
<li class="carousel-item slider-item">Контент 8</li>
</ul>
<ul class="slider-dots">
<li class="slider-dots__dot active"></li>
<li class="slider-dots__dot"></li>
<li class="slider-dots__dot"></li>
</ul>
<button class="slider-arrow right" name="next offer">Вправо</button>
</div>
В данном случае необходимо отображение 3х элементов li в одном слайде. Также нужна адаптивность, чтобы на мобильном отображался один элемент.
Как лучше и оптимальнее это реализовать?
Необходимо скрыть все элементы li кроме первых трех, затем при прокрутке, например добавлять display:none всем элементам, кроме отображаемых. Перелистывание автоматическое, циклическое + управление по кнопкам "вправо" , "влево" и точкам (к активной точке добавлять класс active)
