<!--https://dsgnmax.ru/sliders/slider-te225--> <script>
//Блоку, из которого будете делать слайдер нужно присвоить класс uc-slider-te225
$(".uc-slider-te225 .t774__separator").remove();
$(document).ready(function(){
setTimeout(function(){
$('.uc-slider-te225 .t774__container').slick({
infinite: true, //Бесонечная прокрутка
autoplay: true, //Автопроигрывание
autoplaySpeed: 3000, //Через какое время слайды будут сменяться
speed: 400, // Скорость
pauseOnHover:false, //Пауза при наведении на карточку
pauseOnDotsHover: false, //Пауза при наведении на точки навигации
slidesToShow: 3, //Количество карточек для показа(в настройках блока должно быть такое же количество)
centerMode: true, //Центрирование карточек
centerPadding: '0px', //Боковые отступы при центрировании карточек
cssEase:'ease-in-out', //Плавность смены слайдов
adaptiveHeight:false, //Адаптивная высота, подстраивается под высоту карточек
dots:true, //Точки
// slidesToScroll: 1, // Количество карточек, которые пролистываются
swipeToSlide: true, //Пролистывание карточек с помощью мыши без привязки к количеству
//Ссылки на иконки влево и вправо
prevArrow:"<img class='slick-prev' src='https://static.tildacdn.com/tild3466-3038-4438-b232-343039306635/arrow-left.svg'>",
nextArrow:"<img class='slick-next' src='https://static.tildacdn.com/tild3031-3561-4064-a533-323033643532/arrow-right.svg'>",
responsive: [
{
breakpoint: 1024, //Планшет горизонтальный
settings: {
slidesToShow: 2, //Количество карточек
slidesToScroll: 1,
infinite: true,
}
},
{
breakpoint: 640, //Планшет вертикальный
settings: {
slidesToShow: 2, //Количество карточек
slidesToScroll: 1,
infinite: true,
}
},
{
breakpoint: 480, //Телефон горизонтальный
settings: {
slidesToShow: 1, //Количество карточек
slidesToScroll: 1,
infinite: true,
}
}
]
});
}, 20);
});
</script> <style>
:root{
--borderRadiusContainer: 16px; /*Скругление углов у контейнера*/
--widthIcon: 40px; /*Ширина иконки стрелки*/
--heightIcon: 40px; /*Высота иконки стрелки */
--opacityHover: 0.7; /*Прозрачность стрелок при наведении*/
--tansitionHover: .3s ease-in-out; /*Скорость и плавность анимации при наведении на стрелки*/
--overflow: hidden; /*visible - если нужно, чтобы карточки выходили за предел контейнера*/
--arrowDisplay: block; /*Видимость стрелок навигации, если нужно убрать стрелки пропишите значение none вместо block*/
--paddingContainerTop: 30px; /*Отступ у контейнера с карточками сверху*/
--paddingContainerBottom: 30px; /*Отступ у контейнера с карточками снизу*/
}
.slick-list {
padding-top: var(--paddingContainerTop) !important;
padding-bottom: var(--paddingContainerBottom) !important;
border-radius: var(--borderRadiusContainer) !important;
/*Если нужно, чтобы карточки выходили за предел контейнера*/
overflow:var(--overflow) !important;
}
.slick-arrow{
top:50%;
transform: translateY(-50%);
position:absolute;
cursor:pointer;
display: var(--arrowDisplay) !important;
}
/*Настройка точек навигации*/
.slick-dots{
box-sizing: border-box;
padding-left: 0px !important;
bottom: -50px !important; /*Расстояние вниз от карточек слайдера*/
}
.slick-dots li.slick-active button:before {
color: #269df7 !important; /*Цвет точки активного слайда*/
}
.slick-dots li button:before {
color: #ffffff !important; /*Цвет точек неактивных слайдов*/
font-size: 10px !important; /*Размер точек*/
}
/*Десктоп разрешение*/
@media screen and (min-width: 1200px) {
.slick-prev { /*Стрелка влево*/
width: var(--widthIcon) !important;
height: var(--heightIcon) !important;
left: -25px !important; /*Положение стрелки*/
z-index:998;
top:50% !important; /* Расположение стрелки по вертикали*/
}
.slick-next { /*Стрелка вправо*/
width: var(--widthIcon) !important;
height: var(--heightIcon) !important;
right: -25px !important; /*Положение стрелки*/
z-index:998;
top:50% !important; /* Расположение стрелки по вертикали*/
}
.slick-prev:hover, .slick-next:hover{
opacity: var(--opacityHover) !important;
transition: var(--tansitionHover);
}
}
/*Разрешение для вертикального планшета*/
@media screen and (max-width: 960px) {
.slick-prev { /*Стрелка в лево*/
width:30px !important; /*Ширина иконки стрелки влево*/
height:30px !important; /*Высота иконки стрелки влево*/
left: 30px !important; /*Положение стрелки*/
z-index:998;
}
.slick-next { /*Стрелка в право*/
width:30px !important; /*Ширина иконки стрелки вправо*/
height:30px !important; /*Высота иконки стрелки вправо*/
right: 30px !important; /*Положение стрелки*/
z-index:998;
}
}
/*Разрешение для горизонтального телефона*/
@media screen and (max-width: 640px) {
.slick-prev {
left: 10px !important;
z-index: 998 !important;
}
.slick-next {
right: 10px !important;
z-index: 998 !important;
}
.t774__container_mobile-grid {
padding: 0 0px !important;
}
}
/*Разрешение для вертикального телефона*/
@media screen and (max-width: 480px) {
.slick-prev {
width: 40px !important;
height: 40px !important;
left: 10px !important;
z-index: 998 !important;
}
.slick-next {
width: 40px !important;
height: 40px !important;
right: 10px !important;
z-index: 998 !important;
}
.slick-list{
padding-bottom: 0 !important;
}
}
@media screen and (min-width: 640px){
/*Стиль карточек при слайдинге на десктопе*/
.uc-slider-te225 .slick-slide{
transition: all .4s ease; /*Плавность анимации у всех карточек слайдера*/
filter: blur(4px); /* не активных фотографий*/
}
.uc-slider-te225 .slick-center {
transition: all .4s ease; /*Плавность анимации у активной карточки слайдера*/
filter: blur(0); /* активной фотографии*/
transform: scale(1.1);
}
}
@media screen and (max-width: 640px){
/*Стиль карточек при слайдинге yа десктопе*/
.uc-slider-te225 .slick-slide{
transition: all .4s ease; /*Плавность анимации у всех карточек слайдера*/
filter: blur(2px); /* не активных фотографий*/
}
.uc-slider-te225 .slick-center {
transition: all .4s ease; /*Плавность анимации у активной карточки слайдера*/
filter: blur(0); /* активной фотографии*/
transform: scale(1.03);
}
}
</style> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/> <script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>