<script type="text/javascript">
    $(document).ready(function(){
        /* ================= НАСТРОЙКИ СЛАЙДЕРА ================= */

        var block = '#rec5509089601';   // Block id блока, который слайдится: каталог T1291 или карточки T1301

        var slidesDesktop = 3;          // карточек на экране шире 1024px
        var slidesTablet  = 2;          // карточек на экране 600–1024px
        var slidesSmall   = 2;          // карточек на экране 480–600px
        var slidesMobile  = 1;          // карточек на экране до 480px
        var slidesToScroll = 1;         // на сколько карточек листать за одно нажатие

        var speed    = 300;             // скорость перелистывания, мс
        var infinite = true;            // листать по кругу: true — да, false — нет

        var autoplay      = false;      // листать самому: true — да, false — нет
        var autoplaySpeed = 5000;       // пауза между перелистываниями, мс

        var gap = 10;                   // промежуток между карточками, px

        var arrows         = true;      // стрелки: true — показывать, false — нет
        var arrowSize      = 30;        // диаметр круга стрелки, px
        var arrowColor     = '#0082d8'; // цвет круга
        var arrowIconColor = '#ffffff'; // цвет галочки

        /* ====================================================== */

        if (!$(block).length) return;

        /* Стили слайдера — только для блока из настроек,
           значения тоже из настроек */
        function chevron(path){
            var svg = "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14'><path d='" + path +
                "' fill='none' stroke='" + arrowIconColor +
                "' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>";
            return 'url("data:image/svg+xml,' + encodeURIComponent(svg) + '")';
        }
        var b = block + ' ';
        var arrowL = b + '.a-left.control-c.prev.slick-prev.slick-arrow';
        var arrowR = b + '.a-right.control-c.next.slick-next.slick-arrow';
        var css = [
            /* Сетка каталога — флекс, слайдеру нужен обычный блок */
            b + '.t-catalog__card-list.slick-slider { display: block; }',

            /* Промежуток между карточками, крайние карточки — по краям
               колонки каталога */
            b + '.slick-list { margin: 0 ' + (-gap / 2) + 'px; }',
            b + '.slick-slide { box-sizing: border-box; padding: 0 ' + (gap / 2) + 'px; }',

            /* Карточки одной высоты, кнопки во всех карточках на одном
               уровне — как в сетке каталога. В T1301 карточка вложена
               в колонку, поэтому растягиваем и колонку */
            b + '.slick-track { display: flex; }',
            b + '.slick-slide { height: auto; }',
            b + '.slick-slide > div, ' + b + '.slick-slide .js-product, ' +
                b + '.slick-slide .t-catalog__card { height: 100%; }',

            /* T1301: кнопки прижаты к низу карточки, текстовая часть
               занимает всё место над ними. Тильда делает так только
               при включённом выравнивании кнопок и не на телефоне,
               в слайдере — всегда */
            b + '.slick-slide .t1301__content { flex-grow: 1; }',
            b + '.slick-slide .t1301__btn-wrapper { margin-top: auto; }',

            /* Стрелки — как в слайдере анонсов на главной: круг с галочкой,
               по центру высоты слайдера, центр круга — на краю слайдера.
               Стрелки — картинки из настроек slick ниже с чёрной галочкой.
               Внутренний отступ в половину круга не оставляет картинке места,
               поэтому её не видно, а галочка нарисована фоном.
               Селекторы длиннее, а отступы с !important — чтобы перебить
               общие стили стрелок, которые есть на странице */
            arrowL + ', ' + arrowR + ' {' +
                ' box-sizing: border-box;' +
                ' width: ' + arrowSize + 'px;' +
                ' height: ' + arrowSize + 'px;' +
                ' padding: ' + (arrowSize / 2) + 'px;' +
                ' border: 0;' +
                ' border-radius: 50%;' +
                ' box-shadow: none;' +
                ' background-color: ' + arrowColor + ';' +
                ' background-position: center;' +
                ' background-size: 7px 12px;' +
                ' background-repeat: no-repeat;' +
                ' z-index: 2; }',
            arrowL + ' { left: ' + (-arrowSize / 2) + 'px !important; right: auto !important;' +
                ' background-image: ' + chevron('M7 1 1 7l6 6') + '; }',
            arrowR + ' { left: auto !important; right: ' + (-arrowSize / 2) + 'px !important;' +
                ' background-image: ' + chevron('M1 1l6 6-6 6') + '; }',

            /* Уже 670px поле от слайдера до края экрана меньше половины
               круга, и круг обрезался бы — ставим стрелки внутрь слайдера,
               по его краям */
            '@media screen and (max-width: 669px) {' +
                ' ' + arrowL + ' { left: 0 !important; }' +
                ' ' + arrowR + ' { right: 0 !important; } }'
        ].join('\n');
        $('<style>').text(css).appendTo('head');

        function initSlider(){
            var $list = $(b + '.t-catalog__card-list').not('.slick-initialized');
            if (!$list.children('.js-product').length) return;

            /* Картинки карточек каталог догружает, когда карточка видна
               на экране. Карточки, въехавшие в слайдер, и копии карточек
               на краях слайдера проверяем на каждом повороте */
            $list.on('init setPosition afterChange', function(){
                if (window.t_lazyload_update) t_lazyload_update();
            });

            $list.slick({
                infinite: infinite,
                speed: speed,
                autoplay: autoplay,
                autoplaySpeed: autoplaySpeed,
                arrows: arrows,
                slidesToShow: slidesDesktop,
                slidesToScroll: slidesToScroll,
                prevArrow:"<img class='a-left control-c prev slick-prev' src='https://static.tildacdn.com/tild3136-3235-4436-b162-353962616539/back.svg'>",
                nextArrow:"<img class='a-right control-c next slick-next' src='https://static.tildacdn.com/tild3863-6336-4263-a466-356536656537/next.svg'>",
                responsive: [
                    {
                        breakpoint: 1024,
                        settings: {
                            slidesToShow: slidesTablet,
                            slidesToScroll: slidesToScroll,
                            infinite: infinite,
                        }
                    },
                    {
                        breakpoint: 600,
                        settings: {
                            slidesToShow: slidesSmall,
                            slidesToScroll: slidesToScroll,
                            infinite: infinite,
                        }
                    },
                    {
                        breakpoint: 480,
                        settings: {
                            slidesToShow: slidesMobile,
                            slidesToScroll: slidesToScroll,
                            infinite: infinite,
                        }
                    }
                ]
            });
        }

        /* Каталог (T1291) рисует карточки уже после загрузки страницы
           и сообщает об этом событием tStoreRendered. В блоке карточек
           (T1301) они сразу на месте — тогда слайдер запускаем сразу */
        $(block).on('tStoreRendered', initSlider);
        initSlider();

        /* Если список стоит в закладке: слайдер из скрытой закладки
           запускается с нулевой шириной и остаётся пустым.
           Закладки Тильды сообщают блоку, что он показан (displayChanged), —
           в этот момент пересчитываем размеры слайдера */
        $(block).on('displayChanged', function(){
            $(this).find('.t-catalog__card-list.slick-initialized').slick('setPosition');
        });
    });
</script>