Добавьте на страницу блок TE100 из раздела Плитка и ссылка
Заголовок и подзаголовок можно удалить в Контенте блока. Отступы сверху и снизу блока можно сделать минимальными в Настройках блока. Если вы показываете, например, по 3 карточки в слайдере, то в блоке должно быть как минимум 4 карточки, иначе слайдер работать не будет.
Digital Storytelling
Tilda Publishing
Digital Storytelling
The Future
Digital Storytelling
Tilda Publishing
Digital Storytelling
The Future
Digital Storytelling
Tilda Publishing
Digital Storytelling
The Future
Digital Storytelling
Tilda Publishing
Digital Storytelling
The Future
Добавьте под ним блок T123 из раздела Другое
И поместите в него этот уже подготовленный код Slick Slider:
И поместите в него этот уже подготовленный код Slick Slider:
<style>
/* Укажем ширину слайдера в 100% */
.sliderblock {
width: 100%;
}
</style>
<!--Это скрипт слайдера Slick Slider-->
<script type="text/javascript">
$('#rec352501791 .t-card__col').wrapAll('<div class="sliderblock">');
$(document).ready(function(){
$('.sliderblock').slick({
infinite: true,
speed: 300,
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>Замените в коде #rec352501791 на id вашего блока TE100
id блока можно посмотреть внизу панели Настроек блока SV406
Добавьте под ним блок 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:
И поместите в него этот код подключения 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>Опубликуйте страницу и проверьте отображение.
