Слайдер из TM103 с уменьшением боковых

Как сделать слайдер с эффектами

Слайдер с эффектом увеличения центрального слайда можно сделать для любого блока, но нужно понимать что будет увеличиваться весь контент слайда и это не всегда может смотреться хорошо.

Рассмотрим на примере блока TM103 из раздела Команда

Здесь будет видео Инструкция.

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

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

Eva Stark

Customer Support
Julia Bush

Design Director
Max Holden

Founder & Art Director
Eva Stark

Customer Support
Julia Bush

Design Director
Max Holden

Founder & Art Director

Настройки блока:

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

Добавили всего одну строчку в код: centerMode: true, // Центрируем слайд

<script type="text/javascript">
  $(".t526__separator").remove();
    $(document).ready(function(){
        $('#rec342961002 .t526__container').slick({
            infinite: true, // Бесконечная прокрутка
            slidesToShow: 5, // Сколько слайдов показываем
            slidesToScroll: 1, // По сколько слайдов скролим
            centerMode: true, // Центрируем слайд
            autoplay: true,  // Автоплей включен
            autoplaySpeed: 2000, // Время ожидания смены слайдов
            pauseOnHover: false, // Отключена пауза при наведении на слайдер
            speed: 600, // Скорость смены слайдов
            // Указываем свои изображения стрелок управления
            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, // По сколько слайдов скролим
        centerMode: false, // Отключаем центрирование слайда
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1, // Сколько слайдов показываем
        slidesToScroll: 1,  // По сколько слайдов скролим
        centerMode: false, // Отключаем центрирование слайда
      }
    }
  ]
  });
});
</script>

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

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

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

</style>

<!--Конец стилей для стрелок управления-->

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

<!--Стили для центрального слайда-->

<style>

@media screen and (min-width: 1024px) {
  #rec342961002 .slick-list.draggable {
    padding: 0 !important;
    margin-left: -30px !important;
  }

  #rec342961002 .slick-slide.slick-active {
    align-items: center !important;
    display: grid !important;
  }

  #rec342961002 .slick-slide {
     transition: all .6s ease !important;
  }

  #rec342961002 .slick-center {
    transform: scale(1.3) !important;
  }

  #rec342961002 .slick-track {
    margin-top: 60px !important;
    margin-bottom: 60px !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>

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

Вернутся на главную

Задать вопрос

Viber