Слайдер для Спиридонова

Добавьте на страницу блок SТ310N из раздела Магазин
И выведите в нём каталог товаров

Добавьте под ним блок T123 из раздела Другое
И поместите в него этот уже подготовленный код Slick Slider:

<script>
$(function slideCatalog(){
    let block = "#rec335466254";  
    let slideCatalogTimer = setInterval(function() {
        if($(block + " .t-store__card__imgwrapper").length) {
            clearInterval(slideCatalogTimer);
            $(block + " .t-store__grid-separator").remove();
            $(block + " .js-store-grid-cont").slick({ 
                infinite: true,     
                autoplay: true,     
                autoplaySpeed: 2000, 
                speed: 600,         
                slidesToShow: 3,    
                slidesToScroll: 1,  
                easing: 'ease-out', 
                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: 3,
                            slidesToScroll: 1,
                            infinite: true,
                        }
                    },
                    {
                        breakpoint: 600,
                        settings: {
                            slidesToShow: 2,
                            slidesToScroll: 1,
                            infinite: true,
                            arrow: false,
                        }
                    },
                    {
                        breakpoint: 480,
                        settings: {
                            slidesToShow: 1,
                            slidesToScroll: 1,
                            infinite: true,
                            arrow: false,
                        }
                    }
                ]
            });
        }
    },1000)
});
</script>

Замените в коде #rec335466254
на id вашего блока SТ310N

id блока можно посмотреть внизу панели Настроек блока SТ310N

Добавьте под ним блок T123 из раздела Другое
И поместите в него этот код стилей для элементов управления слайдером:

Этот код добавляется на страницу всего один раз.

Если у вас на странице будет несколько слайдеров, то несколько раз его добавлять не нужно.
Блок с этим кодом должен быть на странице добавлен всего один раз.

<style>
/* Стили для стрелочек управления */
.a-left.control-c.prev.slick-prev.slick-arrow,
.a-right.control-c.next.slick-next.slick-arrow {
  width: 20px;
  height: 20px;
  border: 1px solid #d4d4d4;
  border-radius: 100%;
  padding: 10px 10px;
  box-shadow: 0 0 10px #00000036;
  background-color: #fff;
  z-index: 99;
}

/* Отступы стрелочек Десктоп */
.slick-prev {
    left: -60px !important;
}

 .slick-next {
    right: -60px !important;
}

/* Отступы стрелочек для планшетов и моб */
@media screen and (max-width: 1280px) {
  .slick-prev {
    left: -30px !important;
  } 

  .slick-next {
    right: -30px !important;
  }
}

@media screen and (max-width: 640px) {
  .slick-prev {
    left: 0px !important;
  } 

  .slick-next {
    right: 0px !important;
  }
  /* Размер стрелочек в моб. версии */
  .a-left.control-c.prev.slick-prev.slick-arrow,
  .a-right.control-c.next.slick-next.slick-arrow {
    width: 12px;
    height: 12px;
  }
}
</style>

Добавьте в самом низу страницы блок T123 из раздела Другое
И поместите в него этот код подключения Slick Slider:

Этот код должен быть обязательно в самом низу страницы, после всех блоков.
Этот код добавляется на страницу всего один раз.

Если у вас на странице будет несколько слайдеров, то несколько раз его добавлять не нужно.
Блок с этим кодом должен быть на странице добавлен всего один раз.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css" integrity="sha256-4hqlsNP9KM6+2eA8VUT0kk4RsMRTeS7QGHIM+MZ5sLY=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" integrity="sha256-UK1EiopXIL+KVhfbFa8xrmAWPeBjMVdvYMYkTAEv/HI=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js" integrity="sha256-NXRS8qVcmZ3dOv3LziwznUHPegFhPZ1F/4inU7uC8h0=" crossorigin="anonymous"></script>

Опубликуйте страницу и проверьте отображение.

Вернутся на главную

Задать вопрос

Viber