<!--https://dsgnmax.ru/sliders/running-line-logo--> <style>
:root{
--dbmSliderRunPadding: 40px; /*Отступ всего контейнера от края экрана на десктопе*/
--dbmSliderRunPaddingMobile: 10px; /*Отступ всего контейнера от края экрана на мобилке*/
--dbmSliderRunBorderRadiusContainer: 16px; /*Скругление углов у контейнера*/
--dbmSliderRunBorderRadiusLogo: 16px;
--dbmSliderRunOverflow:hidden; /*visible - если нужно, чтобы карточки выходили за предел контейнера*/
--dbmSliderRunWidthLogo: 100%;
--dbmSliderRunAspectRation: 2/1; /*Соотношение сторон у логотипа*/
--dbmSliderRunGap: 20px; /*Отступ между логотипами на декстопе*/
--dbmSliderRunGapMobile: 10px; /*Отступ между логотипами на мобилке*/
}
[class*="uc-run-logo"] .swiper-wrapper {
-webkit-transition-timing-function: linear !important;
transition-timing-function: linear !important;
}
[class*="uc-run-logo"] .t774__container {
max-width: calc(100vw - var(--dbmSliderRunPadding) * 2);
margin: 0 auto;
border-radius: var(--dbmSliderRunBorderRadiusContainer) !important;
overflow:var(--dbmSliderRunOverflow) !important;
}
[class*="uc-run-logo"] .swiper-wrapper{
display: flex !important;
gap: var(--dbmSliderRunGap);
}
[class*="uc-run-logo"] .t774__content{
display:none;
}
[class*="uc-run-logo"] .t774__imgwrapper{
width: var(--dbmSliderRunWidthLogo);
aspect-ratio: var(--dbmSliderRunAspectRation);
padding-bottom:0% !important;
border-radius: var(--dbmSliderRunBorderRadiusLogo) !important;
overflow: hidden !important;
}
[class*="uc-run-logo"] .t774__wrapper{
background-color: transparent;
}
/*Убираем отступ снизу */
[class*="uc-run-logo"] .t774__col {
max-width: 420px !important;
margin: 0 !important;
padding: 0 !important;
}
@media screen and (max-width: 480px){
[class*="uc-run-logo"] .swiper-wrapper{
gap: var(--dbmSliderRunGapMobile);
}
[class*="uc-run-logo"] .t774__container {
max-width: calc(100vw - var(--dbmSliderRunPaddingMobile) * 2);
}
}
/*Если для второго слайдера нужно поменять сотношение сторон у логотипа*/
[class*="uc-run-logo-2"] .t774__imgwrapper{ /*Указываем название класса нужного слайдера*/
aspect-ratio: 1 / 1;
}
</style> <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script> <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"> <script>
document.addEventListener('DOMContentLoaded', () => {
const containersRun = document.querySelectorAll('.t774__container');
containersRun.forEach((containerRun) => {
const parentRun = containerRun.closest('[class*="uc-run-logo"]');
if (parentRun) {
initializeSwiper(containerRun, parentRun);
}
});
function initializeSwiper(containerRun, parentRun) {
const slidesRun = containerRun.querySelectorAll('.t774__col');
containerRun.classList.add('swiper');
const wrapperRun = document.createElement('div');
wrapperRun.classList.add('swiper-wrapper');
slidesRun.forEach((slideRun) => {
slideRun.classList.add('swiper-slide');
wrapperRun.appendChild(slideRun);
});
containerRun.innerHTML = '';
containerRun.appendChild(wrapperRun);
let swiperConfigRun = {
loop: true,
autoplay: {
delay: 0,
disableOnInteraction: false,
reverseDirection: false, // значение true меняет направление движения
},
effect: 'slide',
speed: 5000, //Скорость пролистывания слайдов, чем больше значение, тем медленнее двигаются слайды
slidesPerView: 6, //Количество карточек на экране
spaceBetween: 20, //Отступ между карточками, если меняем здесь, то меняем и в переменных root
slidesPerGroup: 1, //Пролистывание слайдов за раз
breakpoints: {
320: {
slidesPerView: 3,
slidesPerGroup: 1,
spaceBetween: 10,
},
480: {
slidesPerView: 3,
slidesPerGroup: 1,
spaceBetween: 10,
},
640: {
slidesPerView: 4,
slidesPerGroup: 1,
},
768: {
slidesPerView: 4,
slidesPerGroup: 1,
},
1000: {
slidesPerView: 4,
slidesPerGroup: 1,
},
1360: {
slidesPerView: 5,
slidesPerGroup: 1,
},
1920: {
slidesPerView: 6,
slidesPerGroup: 1,
}
}
};
// Вторая бегущая строка на странице
if (parentRun.classList.contains('uc-run-logo-2')) {
swiperConfigRun.speed = 6000;
swiperConfigRun.effect = "slide";
swiperConfigRun.autoplay = {
delay: 0,
disableOnInteraction: false,
reverseDirection: true, // значение true меняет направление движения
};
swiperConfigRun.breakpoints = {
320: {
slidesPerView: 3,
slidesPerGroup: 1,
},
480: {
slidesPerView: 3,
slidesPerGroup: 1,
},
640: {
slidesPerView: 4,
slidesPerGroup: 1,
},
768: {
slidesPerView: 4,
slidesPerGroup: 1,
},
1000: {
slidesPerView: 4,
slidesPerGroup: 1,
},
1360: {
slidesPerView: 5,
slidesPerGroup: 1,
},
1920: {
slidesPerView: 6,
slidesPerGroup: 1,
}
};
}
// Конец кода второй бегущей строки
const swiperRun = new Swiper(containerRun, swiperConfigRun);
window.addEventListener('resize', () => swiperRun.update());
}
});
</script>