Слайдер с настраиваемым количеством слайдов к показу

Создай ЗероБлок и добавь в нем элемент "ADD HTML"

Внутри этого элемента напиши
<canvas id="neuro"></canvas>

Скопируй код и вставь его в блок T123

<!-- Подключаем библиотеку слайдера -->


<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>


<!-- Переносим ZeroBlock (их ID) каждый в свой слайд-->
<script>
$("#rec852861362").appendTo(".mySwiper1 .swiper-wrapper .slide1");
$("#rec852864228").appendTo(".mySwiper1 .swiper-wrapper .slide2");
$("#rec852864230").appendTo(".mySwiper1 .swiper-wrapper .slide3");
$("#rec852870374").appendTo(".mySwiper1 .swiper-wrapper .slide4");
$("#rec852870473").appendTo(".mySwiper1 .swiper-wrapper .slide5");
</script>

<!-- Иницилизируем слайдер с именем mySwiper1 c влево, вправо, буллеты -->
<script>
var swiper = new Swiper(".mySwiper1", {
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
    slidesPerView: 3,
    slidesToScroll: 1,
    loop: true,
    pagination: {
        el: ".swiper-pagination",
        clickable: true,
    },
});

</script>


<style>
.mySwiper1{
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    height: 300px;
    overflow: hidden;
}

.swiper-navigation {
    display: flex;
    justify-content: space-between; /* Распределяет их по сторонам */
    align-items: center;
    margin-top: 10px; /* Отступ сверху, если нужно */
}

.swiper-button-next, .swiper-button-prev {
    color: #000; /* Цвет кнопок */
    background-color: rgba(255, 255, 255, 0.8); /* Прозрачный фон, при необходимости */
    padding: 10px; /* Отступ вокруг кнопок */
    border-radius: 5px; /* Закругление углов кнопок */
}

</style>

;