​

​

<div class="marquee-container">

  <div class="marquee">

    <!-- Ваши логотипы здесь -->

    <div><img src="logo1.png" alt="Logo 1"></div>

    <div><img src="logo2.png" alt="Logo 2"></div>

     <div><img src="logo1.png" alt="Logo 3"></div>

    <div><img src="logo2.png" alt="Logo 4"></div>

    <!-- Дублируйте div с изображением для других логотипов -->

  </div>

</div>

​

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

​

<!-- Подключение Slick Slider и его стилей -->

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

​

<script type="text/javascript">

  $(document).ready(function(){

  var $marquee = $('.marquee');

​

    $marquee.slick({

    infinite: true,

    slidesToShow: 3,

    slidesToScroll: 1,

    autoplay: true,

    autoplaySpeed: 0,

    speed: 5000,

    draggable: false,

      pauseOnHover:false,

​

    responsive: [

      {

        breakpoint: 768,

        settings: {

          slidesToShow: 1

        }

      }

    ]

  });

​

   $marquee.on('mouseenter', '.partners__item img', function () {

    $marquee.slick('slickSetOption', 'speed', 3000);

  });

​

  $marquee.on('mouseleave', '.partners__item img', function () {

    $marquee.slick('slickSetOption', 'speed', 5000);

  });

    });

</script>