Бегущая строка из логотипов

   <!--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>