How to code a Logo marquee with Swiper.js

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.