Добавьте на страницу блок SV102 из раздела Услуги

Заголовок и подзаголовок и кнопку можно удалить в Контенте блока. Отступы сверху и снизу блока можно сделать минимальными в Настройках блока.

Слайдер предназначен для показа по одному слайду.
Для работы слайдера в блоке должно быть как минимум две карточки.
  • Карточка 1
    Group and individual classes
    We collect groups from 5 to 15 students and start new groups every month. Also, you can study individual programs with our teachers. See the prices of our special programs for newbies.
    Кнопка
  • Карточка 2
    Online language classes
    You can study online with our teachers at any convenient time for you. You can choose your favorite tutor from all community members, choose the necessary subjects to exercise in if you want to get intensive classes.
    Кнопка
  • Карточка 3
    Learning a language in a fun way for children under 5yo
    We develop special classes for kids to start speaking new languages with fun and no fear. All kids will be involved in intellectual games and the discussion process.
    Кнопка
  • Карточка 4
    Group and individual classes
    We collect groups from 5 to 15 students and start new groups every month. Also, you can study individual programs with our teachers. See the prices of our special programs for newbies.
    Кнопка
  • Карточка 5
    Online language classes
    You can study online with our teachers at any convenient time for you. You can choose your favorite tutor from all community members, choose the necessary subjects to exercise in if you want to get intensive classes.
    Кнопка
  • Карточка 6
    Learning a language in a fun way for children under 5yo
    We develop special classes for kids to start speaking new languages with fun and no fear. All kids will be involved in intellectual games and the discussion process.
    Кнопка

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

<script type="text/javascript">
  $(".t847__separator").remove();
    $(document).ready(function(){
        $('#rec335685594 .t-container').slick({
            infinite: true,
            speed: 300,
            slidesToShow: 1,
            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'>",
  });
});
</script>

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

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

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