How to choose the best slider solution?

Question

JavaScript

Colleagues, I categorically welcome you!
Help advice. On the page (the layout is already ready) it is necessary to implement a slider, in three places with different content. Prepared layout as follows

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

In this case, it is necessary to display 3 li elements in one slide. We also need adaptability so that a single element is displayed on mobile.
What is the best and best way to implement this?
It is necessary to hide all li elements except the first three, then when scrolling, for example, add display:none to all elements except those displayed. Scrolling is automatic, cyclic + control by the buttons "right", "left" and points (add the active class to the active point)

Answer 1

Take advantage of the ready-made ones, here is a good selection. senior.ua