Как подобрать оптимальное решение для слайдера?

Question

[Dennis]

Коллеги, я Вас категорически приветствую!
Помогите советом. На странице (верстка уже готова) необходимо реализовать слайдер, в трех местах с разным контентом. Верстку подготовил следующим образом

<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)

Comments

[FeST1VaL]

А в чем проблема то? например OWL в помощь.

[Dennis]

Артем Будин, проблема с настройкой. Пробовал slickSlider и OWL , но при использовании данных плагинов генерируется их разметка, а переопределить классы мне не удается. В данном случае, вопрос нужно ставить таким образом, как интегрировать данные слайдеры в готовую разметку

[FeST1VaL]

Dennis, так, а зачем ее переопределять? делать велосипед из велосипеда?

Answer 1

[Gosha235]

Воспользуйтесь лучше уже готовыми, вот хорошая подборка. senior.ua