Simple Trick for Infinite Marquee with Swiper.js

Alright, let’s get real. You’re here because you want an infinite marquee slider, something where logos just scroll by on an endless loop. Why? Because you think your visitors will be so captivated by your logo garden that they’ll just sit there, mesmerized, wondering if it loops? Spoiler: they won’t. But you know who will see that loop? You. The dev. So let’s make it work. Because if it’s gonna loop, it better loop like it was born for it.

We’re using Swiper.js for this (v11.1.14 at time of writing). It’s gonna scroll smooth, look seamless, and run until the end of time (or until someone’s boss yells “budget cuts!”). Let’s get into it.

Step 1: Set Up Swiper’s HTML (But With Your CSS)

Swiper’s default HTML structure is bland as hell, which is good. But it's easy for Swiper's external CSS toboss us around, so let’s tag on some custom classes to every main Swiper element. This’ll let us slap on our own CSS without bending over backwards (with !important) to override their stuff later. Call it combo classes, call it a power move; the point is, we’re taking control.

<!-- Swiper CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />

<!-- Swiper HTML Structure -->
<div class="swiper marquee-swiper">
  <div class="swiper-wrapper marquee-swiper">
    <div class="swiper-slide marquee-swiper">Logo 1</div>
    <div class="swiper-slide marquee-swiper">Logo 2</div>
    <div class="swiper-slide marquee-swiper">Logo 3</div>
    <div class="swiper-slide marquee-swiper">Logo 4</div>
    <div class="swiper-slide marquee-swiper">Logo 5</div>
  </div>
</div>

Every time we add .marquee-swiper to these elements, we’re laying the groundwork for a smooth infinite scroll without Swiper’s out-of-the-box styling trashing it. This is how you wrestle back control, kids.

Step 2: Customize the CSS for Hypnotic Scroll

You want this marquee to feel like it’s gliding through a pool of butter. Let’s grease it up with some custom CSS. Slap this in and marvel as your logos coast along, uninterrupted and cool as hell.

/* Outer swiper container */
.swiper.marquee-swiper {
  margin-top: 4rem;
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    white 10%,
    white 90%,
    transparent 100%
  );
}

.swiper-wrapper.marquee-swiper {
  transition-timing-function: linear;
  align-items: center;
}

/* Individual slides */
.swiper-slide.marquee-swiper {
  width: 12rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

Why We’re Doing This:

• mask-image: This gives the marquee that classy fade effect on both sides. Logos magically emerge from the shadows and disappear into the void. Do we need it? Probably not. Do we want it? Yes. Do you want more stuff like this? Check out my favorite CSS that nobody told you about.
• transition-timing-function: linear: This is the secret sauce. It forces the scroll to be smooth and predictable, not like some rickety rollercoaster with Swiper’s default easing effects. Swiper CSS ships with ease by default, and we definitely can't have that for this setup.
• .swiper-slide.marquee-swiper: The slides are sized up so they don’t look like squished little thumbnails. It’s all about presence. You might want to play around with this depending on the sizes of the logos / content you are planning to use. We are going to use a swiper instance with slidesPerView set to auto so that Swiper uses this CSS in it's calculations. Another option would be to set slidesPerView to a number value and let Swiper handle it, but I find the explicit width works better for responsiveness. Plus it is easier to manage it like this with Webflow's breakpoint system in my opinion.

Step 3: Unleash the JavaScript to Make It Loop Forever

Here’s where the dark arts are. Drop in this JavaScript, and your logo garden will scroll endlessly, mindlessly, like a hypnotic waterfall of branding. Everyone who visits will be so impressed that you've worked with Comcast, but honestly I'll just get flashbacks to the time my cable went out while the 49ers were leading the Superbowl.

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.js"></script>

<script>
  var swiper = new Swiper(".marquee-swiper", {
    slidesPerView: "auto",         // Slides take up the width defined in our CSS
    spaceBetween: 160,             // Adds breathing room between logos
    loop: true,                    // If it doesn’t loop, what are we even doing here?
    speed: 6000,                   // Time in ms for one slide to transition. Change this to your liking.
    allowTouchMove: false,         // It’s a marquee, not an interactive carnival ride
    autoplay: {
      delay: 1,                    // 1 millisecond delay: we’re moving nonstop. Try 0 here too :).
      disableOnInteraction: false  // If someone tries to touch, let them fail in peace
    }
  });
</script>

Key Parts:

• loop: true: Without this, the marquee stops after one pass, and you end up looking like an amateur. Loop it, or don’t even bother showing up.
• speed: 6000: Adjust this to make it scroll slower or faster, depending on how much time you want users to waste staring at logos. We’re at 6000ms for smooth scrolling without feeling like it’s stuck in mud.
• autoplay.delay: 1: This tiny delay makes the autoplay function kick in every millisecond, so it never stops. It’s the Energizer bunny of marquees.

Step 4: Bask in the Glory of Your Infinite Marquee

Boom. You’ve built an infinite logo garden that scrolls like butter and never stops. Why? Because, somehow, in the year of our web lord 2024, people still want their logos plastered on an endless scroll. And now, thanks to you, they’ve got it.

Quick Notes

If things aren’t smooth, double-check transition-timing-function: linear. Swiper’s default easing settings will make this feel like a janky escalator, not the hypnotic conveyor belt of logos you deserve. And if the logos flicker or don’t loop right, try adjusting the speed. Swiper sometimes thinks it knows better, but you gotta remind it who’s boss.

Final Thought

You did it. You wrangled Swiper into submission and made it do your bidding. So sit back, crack a drink, and watch those logos scroll on forever. Forever.

Bonus! Let's Roast Your Logo Garden Brands

1. Facebook – “Welcome to Meta, where we’re so focused on the metaverse, we forgot to make Facebook fun again. Watch out, there might be an ad lurking between these logos!”
2. Amazon – “Jeff Bezos may be rocketing to space, but your Prime delivery is stuck in an endless loop. Just like this logo.”
3. Nestlé – “Because who doesn’t want a brand famous for stealing water scrolling forever across their website?”
4. Ticketmaster – “Look! It’s Ticketmaster, forever scrolling by while adding another ‘processing fee’ each time.”
5. McDonald's – “Billions and billions served … and counting. You’ll see it scroll by every 5 seconds, just in case you weren’t already craving fries.”
6. Comcast – “No need to wait on hold with Comcast support here. Their logo’s just gonna keep coming back to remind you of that time your internet went out in the middle of the Super Bowl.”
7. Spirit Airlines – “Get ready to pay extra if you want this logo to scroll any faster.”
8. Facebook’s New Name, Meta – “Oh look, Meta again! This time they’re really, really serious about this rebrand, promise.”
9. Apple – “Minimalism taken to the extreme. Apple’s logo just sits there, silently judging your choice of phone.”
10. Myspace – “Myspace: here’s a reminder of what happens when a social network stops trying. Keep scrolling, like the rest of the world did.”
11. Crypto.com – “Sure, it’s a logo, but we can’t actually guarantee it has any inherent value.”
12. Pepsi – “The taste of a new generation. Or, just a reminder to choose Coke.”
13. Bank of America – “Every time it loops, they’ve added another overdraft fee to your checking account.”
14. Tesla – “Watch this logo zoom by … and then unexpectedly brake for no reason.”
15. Goop – “Yes, it’s still there. No, we’re still not sure what it does.”
16. Zoom – “Perfect for the never-ending meeting vibe, and yep, it’ll keep buffering forever just like your last video call.”
17. Starbucks – “By the time this logo scrolls past again, your order of a Grande Triple-Soy-Pumpkin-Spice-Latte might finally be ready.”
18. Equifax – “Because nothing says ‘trustworthy’ like a company that once leaked half of America’s personal data.”
19. Fyre Festival – “You’ll keep waiting for it to show up just like an actual Fyre Festival meal.”
20. Microsoft Edge – “Don’t worry, this logo won’t go away either. It’s just like that time you tried to uninstall Edge.”

‍