О компании
Портфолио
Контакты
Вакансии
info@lupo.ru
Заполнить бриф
Слайдеры
Добавьте на страницу блок ST300 из раздела Магазин. Добавьте на страницу блок ST300 из раздела Магазин. Добавьте на страницу блок ST300 из раздела Магазин. Добавьте на страницу блок ST300 из раздела Магазин.
Take the quiz and find out the best destination for your vacation.
Fill out the form and we will contact you soon.
Имя
Телефон
Почта
Название компании
Что бы Вы хотели разработать?
What is your budget per person?
500
5000
How many people are traveling?
+
Additional comments
ST300
ST300 (Каталог)
ST305N
ST305N (Каталог)
ST310N
ST310N (Каталог)
ST300
Добавьте на страницу блок ST300 из раздела Магазин
More products
Добавьте под ним блок T123 из раздела Другое и поместите в него этот уже подготовленный код Slick Slider:

Замените в коде #rec335397703 на id вашего блока ST300
<script type="text/javascript">
  $(".t754__separator").remove();
    $(document).ready(function(){
        $('#rec335397703 .t754__parent').slick({
            infinite: true,
            speed: 300,
            slidesToShow: 3,
            slidesToScroll: 1,
            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,
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1,
        infinite: true,
      }
    }
  ]
  });
});
</script>
ST300 (Каталог)
Добавьте на страницу блок ST300 из раздела Магазин. И выведите в нём каталог товаров.
Добавьте под ним блок T123 из раздела Другое и поместите в него этот уже подготовленный код Slick Slider:

Замените в коде #rec335397703 на id вашего блока ST300
<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>
ST305N
Добавьте на страницу блок ST305N из раздела Магазин.
More products
Добавьте под ним блок T123 из раздела Другое и поместите в него этот уже подготовленный код Slick Slider:

Замените в коде #rec335397703 на id вашего блока ST305N
<script type="text/javascript">
  $(".t776__separator").remove();
    $(document).ready(function(){
        $('#rec335397703 .t776__parent').slick({
            infinite: true,
            speed: 300,
            slidesToShow: 3,
            slidesToScroll: 1,
            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,
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1,
        infinite: true,
      }
    }
  ]
  });
});
</script>
ST305N (Каталог)
Добавьте на страницу блок ST305N из раздела Магазин. И выведите в него каталог.
Добавьте под ним блок T123 из раздела Другое и поместите в него этот уже подготовленный код Slick Slider:

Замените в коде #rec335397703 на id вашего блока ST305N
<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>
ST310N
Добавьте на страницу блок ST310N из раздела Магазин.
More products
Добавьте под ним блок T123 из раздела Другое и поместите в него этот уже подготовленный код Slick Slider:

Замените в коде #rec335397703 на id вашего блока ST310N
<script type="text/javascript">
  $(".t778__separator").remove();
    $(document).ready(function(){
        $('#rec335397703 .t778__container').slick({
            infinite: true,
            speed: 300,
            slidesToShow: 3,
            slidesToScroll: 1,
            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,
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1,
        infinite: true,
      }
    }
  ]
  });
});
</script>
ST310N (Каталог)
Добавьте на страницу блок ST310N из раздела Магазин. Подключите каталог (контент > низ страницы)
Добавьте под ним блок T123 из раздела Другое и поместите в него этот уже подготовленный код Slick Slider:

Замените в коде #rec335397703 на id вашего блока ST310N
<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>
Добавьте под ним блок 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: #ffffffb5;
}

.a-left.control-c.prev.slick-prev.slick-arrow {
    left: -50px;
}

.a-right.control-c.next.slick-next.slick-arrow {
    right: -50px;
}
</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>