Добавьте на страницу блок TS202 из раздела Отзывы

Заголовок и подзаголовок можно удалить в Контенте блока. Отступы сверху и снизу блока можно сделать минимальными в Настройках блока.
Our Clients Love Us
  • Sarah Lewin
    Project manager in Pixels
    I think if you do something and it turns out pretty good, then you should go do something else wonderful, not dwell on it for too long.
  • Samuel Willson
    Creative director in DD agency
    Before incorporating visual aids into speeches, the speaker should understand that if used incorrectly, the visual will not be an aid, but a distraction.
  • Alex Larkins
    Founder of Pic Pen studio
    You can't connect the dots looking forward, you can only connect them looking backwards.
  • Sarah Lewin
    Project manager in Pixels
    I think if you do something and it turns out pretty good, then you should go do something else wonderful, not dwell on it for too long.
  • Samuel Willson
    Creative director in DD agency
    Before incorporating visual aids into speeches, the speaker should understand that if used incorrectly, the visual will not be an aid, but a distraction.
  • Alex Larkins
    Founder of Pic Pen studio
    You can't connect the dots looking forward, you can only connect them looking backwards.

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

<script type="text/javascript">
  $(".t528__separator").remove();
    $(document).ready(function(){
        $('#rec336072971 .t528__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>

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

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

Добавьте под ним блок 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;
  }
}

/* Выровняем карточки слайдера по центру в мобильной версии */
@media screen and (max-width: 640px) {
  .t528__col {
    display: block !important;
  }
}
</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