<style>
    /*Эти стили перенести в HEAD страницы*/
    /*Кнопки*/
    /*Если слайдер не зациклен, то когда мотать некуда кнопка для перемотки с 0.5 прозрачности*/
    .swiper-button-disabled {opacity: 0.5;}
    .swiper-prev,.swiper-next {cursor: poiter;}
    .swiper-button-lock {display: block!important;}
    
    /*Стили слайдера, не редактировать*/
    .swiper-container {overflow: hidden;}
    .swiper-slide {display: flex !important;}
    /*Если не нужна плавность при перемотке удалить строку ниже*/
    .swiper-wrapper {transition-timing-function: linear!important;}
</style>

<!--Дополнительно вставить в HEAD страницы этот код ↓ -->
<link rel="preconnect" href="https://cdn.jsdelivr.net" />
<!--Дополнительно вставить в HEAD страницы этот код ↑ -->


<!--Все ниже вставить в самый низ сайта ↓ -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

<!--
    ВНИМАНИЕ! Чтобы убрать какое-то свойство - нужно поставить мышку в одну с ним строку и нажать CTRL + / (command + /)
    Либо выделить всю строку, конструкцию мышкой и нажать CTRL + /
    Обратное нажатие сделает свойство опять активным (черный цвет, отсутсвие // в начале)
    Если оно не нужно после тестов - удалить его.
    На продакте комментарии лучше удалить, чтобы не грузили загрузку DOM
-->

<script>
    document.addEventListener("DOMContentLoaded", () => {
        function addSlider(block) {
            let parentBlock = document.querySelector(block);
            let sliderContainer = parentBlock.querySelector('.slider'),
                sliderWrapper = parentBlock.querySelectorAll('.slider .tn-molecule')[0],
                swiperSlide = parentBlock.querySelectorAll('.slider .slide');
            
            sliderContainer.classList.add('swiper-container');    
            sliderWrapper.classList.add('swiper-wrapper');
            swiperSlide.forEach((e) => e.classList.add('swiper-slide'));
            
            let swiperEl = `${block} .swiper-container`;
            
            const slide = new Swiper(swiperEl, {
                // будет ли зациклен слайдер
                loop: "true",
                // расстояние между слайдами в пикселях
                spaceBetween: 20,
                // нужен ли курсор с захватом
                grabCursor: true,
                // можно ли управлять клавишами
                keyboard: {
                  enabled: true,
                  onlyInViewport: false,
                },
                // скорость перемотки слайда
                speed: 1000,
                // Автоперемотка слайдера, раскомментировать сразу весь кусок кода ↓
                // autoplay: {
                //     // Если в delay написать 1, а выше в speed значение от 10000, то слайдер будет ехать как бегущая строка сам
                //     delay: 2000
                // },
                // Автоперемотка слайдера, раскомментировать сразу весь кусок кода ↑
                
                // Если надо запретить листать слайдер вообще, к примеру если включен autoplay
                // allowTouchMove:false,
                slidesPerView: "auto",
                // значения для разных разрешений, к примеру можно задать другой отступ между слайдами и даже скорость перемотки
                breakpoints: {
                    320: {
                        // это расстояние между слайдами
                        spaceBetween: 10,
                        // это скорость
                        speed: 800,
                    },
                    640: {
                        spaceBetween: 10,
                        speed: 800,
                    },
                    960: {
                        spaceBetween: 20,
                    },
                    1200: {
                        spaceBetween: 20
                    }
                },
                // Если навигации в слайдере нет, то удалить эту конструкцию ↓
                navigation: {
                    nextEl: '.swiper-next',
                    prevEl: '.swiper-prev',
                },
                // Если навигации в слайдере нет, то удалить эту конструкцию ↑
            });
            
            slide.on('slideChange', function () {
                t_lazyload_update();
            });
        }
        
        // чтобы активировать новый слайдер, нужно скопировать эту строку и написать новый класс блока
        addSlider(".uc-slider");
    });
</script>