Infinite logo carousel with variabile width

Yes, this is possible if we use the Splide slider with Auto Scroll extension. CSS solutions only work if the width is fixed. Variable width requires JS help.

Step 1. Use Splide from CDN

You can include Splide in your project by adding the following code to your HTML file:

<script src="https://cdnjs.cloudflare.com/ajax/libs/splidejs/4.1.4/js/splide.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide-extension-auto-scroll@0.5.3/dist/js/splide-extension-auto-scroll.min.js"></script>
<link rel='stylesheet' id='splideCss-css' href='https://cdnjs.cloudflare.com/ajax/libs/splidejs/4.1.4/css/splide-core.min.css?ver=6.5.2' media='all' />

Step 2. Define the Splide Markup

Add the Splide’s HTML layout to our project.

<section class="splide">
  <div class="splide__track">
    <ul class="splide__list">
      <li class="splide__slide">Slide 01</li>
      <li class="splide__slide">Slide 02</li>
      <li class="splide__slide">Slide 03</li>
    </ul>
  </div>
</section>

Step 3. Initialize Splide

Next, we need to initialize Splide after adding the HTML.

<script>
const splide = new Splide( '.splide', {
  width: '100vw',
  autoWidth: true,
  type   : 'loop',
  focus  : 'center',
  arrows:false,
  pagination:false,
  pauseOnHover:false,
  pauseOnFocus:false,
  autoScroll: {
      speed: 1,
    },
} );
splide.mount( window.splide.Extensions );
</script>

See the Pen Infinite logo carousel with variable width by DEJAN STANOJEVIC (@dejan1) on CodePen.

Thanks Splide team