How to code a Logo marquee with Swiper.js

javascriptswiperjsswiper

First of all, I love using Swiper!

Swiper is a powerful javascript library to create sliders. It is very flexible and has a lot of options. In this post I will show you how to create a logo marquee with Swiper.

The following javascript shows the simple initializer for Swiper. This works with Swiper 11+.

// import Swiper, Modules and CSS;
import Swiper from "swiper";
import {Autoplay} from "swiper/modules";
import "swiper/css";

export function swiper() {
    if (document.querySelector('.marquee')) {
        const logoSlider = new Swiper('.marquee', {
            modules: [Autoplay],
            loop: true,
            slidesPerView: 'auto',
            speed: 5000,
            allowTouchMove: false,
            autoplay: {
                delay: 1
            }
        });
    }
}

There is one more thing to bear in mind: the delay functions properly, but the animation does not move smoothly.

Add the next part of CSS to make it work.

.marquee-wrapper {
  width: 100%;
  overflow: hidden;
}
.marquee {
  width: 100%;
  overflow: visible;
}

.swiper-wrapper {
  -webkit-transition-timing-function: linear !important;
  -o-transition-timing-function: linear !important;
  transition-timing-function: linear !important;
}

Et voila! You have a logo marquee.

Example