Marquee effect using SplideJS within your Webflow

A quick guide on how to use SplideJS to create a smooth marquee effect in Webflow. Perfect for adding dynamic scrolling content to your website.

FULL CODE

<!-- header code -->
<!-- Start Splidejs CSS-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/splidejs/4.1.4/css/splide-core.min.css" integrity="sha512-cSogJ0h5p3lhb//GYQRKsQAiwRku2tKOw/Rgvba47vg0+iOFrQ94iQbmAvRPF5+qkF8+gT7XBct233jFg1cBaQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- END Splidejs CSS-->

<!-- footer code -->
<!-- Start Splidejs JS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/splidejs/4.1.4/js/splide.min.js" integrity="sha512-4TcjHXQMLM7Y6eqfiasrsnRCc8D/unDeY1UGKGgfwyLUCTsHYMxF7/UHayjItKQKIoP6TTQ6AMamb9w2GMAvNg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/js/splide-extension-auto-scroll.min.js"></script>

<div id="hsliders" class="splide" role="group" aria-label="Splide Basic HTML Example">
  <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>
</div>

<script>
function hSliders() {
  const sliderElement = document.querySelector('#hsliders');
  const slider = new Splide(sliderElement, {
    type: 'loop',
    perPage: 6,
    perMove: 1,
    breakpoints: {
      991: {
        // Tablet
        perPage: 3,
        perMove: 1,
      },
      767: {
        // Mobile
        perPage: 3,
        perMove: 1,
      },
    },  
    pagination: false,
    autoScroll: {
      autoStart: true,
      speed: 0.75,
    },
  });

  slider.on('mounted', () => {
    // Reinitialize Webflow interactions
    Webflow.require('ix2').init();
  });

  slider.mount(window.splide.Extensions);
}

// Initialize the function
  hSliders();
<script>