<!--https://dsgnmax.ru/sliders/running-line-logo--> <script>
//Блоку, из которого будете делать слайдер нужно присвоить класс uc-slider-logo
$(".uc-slider-logo .t774__separator").remove();
$(function(){
$('.uc-slider-logo .t774__container').slick({
pauseOnHover:false,
cssEase:'linear',
arrows: false,
infinite: true, //Бесонечная прокрутка
autoplay: true, //Автопроигрывание
autoplaySpeed: 0, //Через какое время слайды будут сменяться
speed: 6000, // Скорость
slidesToShow: 4, //Количество карточек
responsive: [
{
breakpoint: 960, //Планшет горизонтальный
settings: {
slidesToShow: 3, //Количество карточек
infinite: true,
autoplay: true, //Автопроигрывание
autoplaySpeed: 0, //Через какое время слайды будут сменяться
speed: 8000,
}
},
{
breakpoint: 640, //Планшет вертикальный
settings: {
slidesToShow: 2, //Количество карточек
infinite: true,
autoplay: true, //Автопроигрывание
autoplaySpeed: 0, //Через какое время слайды будут сменяться
speed: 8000,
}
},
{
breakpoint: 480, //Телефон горизонтальный
settings: {
slidesToShow: 1, //Количество карточек
infinite: true,
autoplay: true, //Автопроигрывание
autoplaySpeed: 0, //Через какое время слайды будут сменяться
speed: 10000,
}
}
]
});
});
</script> <style>
:root{
--borderRadiusContainer: 16px; /*Скругление углов у контейнера*/
--borderRadiusLogo: 16px;
--overflow:visible; /*visible - если нужно, чтобы карточки выходили за предел контейнера*/
--heightLogo: 100px; /*Высота лого для десткопа*/
--heightLogoMobile: 100px; /*Высота лого для мобилки*/
--widthLogoMobile: 200px; /*Ширина лого на мобилке*/
}
.t774 {
overflow: hidden;
}
.block-slider .slick-slider {
margin: 0 auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.slick-list {
border-radius: var(--borderRadiusContainer) !important;
/*Если нужно, чтобы карточки выходили за предел контейнера*/
overflow:var(--overflow) !important;
}
.t774__content{
display:none;
}
.t774__imgwrapper{
height: var(--heightLogo) !important; /*Высота лого для десктопа*/
padding-bottom:0% !important;
border-radius: var(--borderRadiusLogo) !important;
overflow: hidden !important;
}
.t774__wrapper{
background-color: transparent;
}
/*Убираем отступ снизу */
.t774__col {
margin-bottom: 0px;
}
@media screen and (max-width:640px){
/*Высота лого в мобилке*/
.t774__imgwrapper {
height: var(--heightLogoMobile) !important;
}
/*Ширина лого в мобилке*/
.t774__col{
width: var(--widthLogoMobile) !important;
}
/*Убираем контейнер у блока на мобилке*/
.slick-list {
overflow: visible !important;
}
}
@media screen and (min-width: 1200px){
.t774__col{
max-width: 290px;
margin-left: 5px !important;
margin-right: 5px !important;
}
}
/*Пролистывание слайдов в другую сторону*/
/*.uc-slider-logo{
transform: rotate(180deg);
pointer-events: none;
}
.uc-slider-logo .t774__bgimg{
transform: rotate(180deg);
}*/
/*----------*/
</style> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/> <script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>