Внимание: Не все обложки имеют настройку высоты. Нужно указать во всех блоках одинаковую высоту. Но в мобильной версии нужно проверять. Некоторые обложки показываются по высоте контента и игнорируют ваши настройки. Будьте внимательны, проверяйте адаптацию на всех устройствах.
Но в коде слайдера добавил строчку: adaptiveHeight: true,
По этому слайдер меняет свою высоту в зависимости от высоты ваших блоков.
Настройки видимости для определённых разрешений в настойках блока, не будут применены в слайдере.
Но в коде слайдера добавил строчку: adaptiveHeight: true,
По этому слайдер меняет свою высоту в зависимости от высоты ваших блоков.
Настройки видимости для определённых разрешений в настойках блока, не будут применены в слайдере.
Добавьте несколько блоков CR... из раздела Обложка
Вы можете сколько угодно добавить блоков, одинаковых или разных.
Зависит от вашего макета дизайна или ТЗ
Зависит от вашего макета дизайна или ТЗ
Добавьте всем блокам Обложек которые будут в слайдере кастомный класс: uc-slider-cr
Добавьте под ними блок T123 из раздела Другое
И поместите в него этот уже подготовленный код Slick Slider:
И поместите в него этот уже подготовленный код Slick Slider:
<script type="text/javascript">
$(document).ready(function(){
$('.uc-slider-cr').wrapAll('<div class="sliderblock">');
$('.sliderblock').slick({
infinite: true, //true - Бесконечная прокрутка, или замените на false
speed: 600, // 600 - скорость смены в миллисекундах
slidesToShow: 1, // 1 - показываем по одному слайду
slidesToScroll: 1, // 1 - сменяем по одному слайду
adaptiveHeight: true, // Слайдер подстраивается под высоту блоков
// Раскомментируйте следующую строчку если вы хотите смену слайдов без сдвига, из прозрачности
// fade: true, // смена слайдеров из прозрачности
// Раскомментируйте следующую строчку если вы хотите удалить стрелки в слайдере
arrows: false, // Стрелки выключены
// Раскомментируйте следующие 2 строчки если вы хотите автопрокрутку слайдера
autoplay: true, // автопрокрутка включена
autoplaySpeed: 2000, // время задержки смены слайдов
// Раскомментируйте следующую строчку, чтобы отключить паузу листания при наведении на слайдер
pauseOnHover: false,
// Если хотим свои кнопки то укажем на них ссылки
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>Добавьте под ним блок 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: 80px !important;
}
.slick-next {
right: 80px !important;
}
/* Отступы стрелочек для планшетов */
@media screen and (max-width: 1200px) {
.slick-prev {
left: 40px !important;
}
.slick-next {
right: 40px !important;
}
}
/* Отступы стрелочек для телефонов */
@media screen and (max-width: 640px) {
.slick-prev {
left: 5px !important;
}
.slick-next {
right: 5px !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:
И поместите в него этот код подключения 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>Опубликуйте страницу и проверьте отображение.
