Добавьте на страницу блок TM102 из раздела Команда

Заголовок и подзаголовок можно удалить в Контенте блока. Отступы сверху и снизу блока можно сделать минимальными в Настройках блока.
  • Max Holden
    Founder & Art Director
  • Eva Stark
    Customer Support
  • Julia Bush
    Design Director
  • Max Holden
    Founder & Art Director
  • Carlos Lott
    Marketing Director

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

<script type="text/javascript">
  $(".t537__separator").remove();
    $(document).ready(function(){
        $('#rec336892758 .t537__container').slick({
            infinite: true,
            speed: 300,
            slidesToShow: 4,
            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>

Замените в коде #rec336889722 на id вашего блока TM102

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

Добавьте под ним блок 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" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
Опубликуйте страницу и проверьте отображение.
Вернутся на главную 
Задать вопрос
Telegram
 Viber
 WhatsApp
Made on
Tilda