Добавьте на страницу блок HW403 из раздела Этапы
Заголовок и подзаголовок можно удалить в Контенте блока. Отступы сверху и снизу блока можно сделать минимальными в Настройках блока.
Добавьте под ним блок T123 из раздела Другое
И поместите в него этот уже подготовленный код Slick Slider:
И поместите в него этот уже подготовленный код Slick Slider:
<script type="text/javascript">
$(".t575__separator").remove();
$(document).ready(function(){
$('#rec336954554 .t-container').slick({
infinite: false,
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,
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
}
}
]
});
});
</script>Замените в коде #rec336919169 на id вашего блока HW403
id блока можно посмотреть внизу панели Настроек блока HW403
Добавьте под ним блок 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: #ffffffb5;
}
.a-left.control-c.prev.slick-prev.slick-arrow {
left: -50px;
}
.a-right.control-c.next.slick-next.slick-arrow {
right: -50px;
}
</style>Добавьте в самом низу страницы блок T123 из раздела Другое
И поместите в него этот код подключения Slick Slider:
И поместите в него этот код подключения Slick Slider:
Этот код должен быть обязательно в самом низу страницы, после всех блоков.
Код добавляется на страницу всего один раз.
Если у вас на странице будет несколько слайдеров, то несколько раз его добавлять не нужно.
Блок с этим кодом должен быть на странице добавлен всего один раз.
Код добавляется на страницу всего один раз.
Если у вас на странице будет несколько слайдеров, то несколько раз его добавлять не нужно.
Блок с этим кодом должен быть на странице добавлен всего один раз.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css" integrity="sha256-4hqlsNP9KM6+2eA8VUT0kk4RsMRTeS7QGHIM+MZ5sLY=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" integrity="sha256-UK1EiopXIL+KVhfbFa8xrmAWPeBjMVdvYMYkTAEv/HI=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js" integrity="sha256-NXRS8qVcmZ3dOv3LziwznUHPegFhPZ1F/4inU7uC8h0=" crossorigin="anonymous"></script>Опубликуйте страницу и проверьте отображение.
