Добавьте на страницу блок QT19N из раздела Текстовый блок

"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."
Alex Larins
Art director
"You can't connect the dots looking forward; you can only connect them looking backwards."
Samuel Willson
Graphic designer
"If it turns out pretty good, then you should go do something else wonderful."
Sarah Lewin
Actress
"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."
Alex Larins
Art director
"You can't connect the dots looking forward; you can only connect them looking backwards."
Samuel Willson
Graphic designer
"If it turns out pretty good, then you should go do something else wonderful."
Sarah Lewin
Actress
Укажите в настройках блока QT19N кастомный класс:
uc-slider-qt19n
Укажите в настойках блока кол-во карточек в ряду:
по одной карточке

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


<script type="text/javascript">
  $(".uc-slider-qt19n .t1030__separator").remove();
    $(document).ready(function(){
        $('.uc-slider-qt19n .t1030__containner').slick({
            infinite: true,
            speed: 600,
            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>

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

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

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

<style>

/* Настроим карточки слайдера */
.uc-slider-qt19n .t1030__col {
  padding: 0 !important;
}

.uc-slider-qt19n .slick-slide {
padding-right: 40px !important;
}

.uc-slider-qt19n .t1030__textwrapper {
  /*Увеличьте значение высоты если текст в карточке не влазит в контейнер*/
  height: 100px !important;
  border-radius: 20px !important;
}

/* Стили для стрелочек управления */
.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: 1200px) {
  .uc-slider-qt19n .slick-slide {
    padding-right: 40px !important;
    margin-left: 20px !important;
  }
}

/*Настройка отступов карточек в моб версии*/
@media screen and (max-width: 960px) {
  .uc-slider-qt19n .slick-slide {
    padding-right: 0px !important;
    margin: 0 20px !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>


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

Задать вопрос
TelegramWhatsAppViber
Made on
Tilda