M
PackageMaven Submit

The Home for
Magento Excellence

Explore. Discover. Elevate. #magento

233
Modules Tested
150
Ready for Magento 2.4
83
Need Your Help
All Administration & Backend Developer Tools Catalog Management Performance & Optimization SEO & URLs Checkout & Payments Customer & Authentication Email & Communication
Quality: All Top Quality Build Works Needs Help
Popular Module Stable v1.1.4

Module Swiper

swissup/module-swiper

Integrates the Swiper touch slider as a Magento 2 JS Widget. Allows creation of mobile-friendly, hardware-accelerated image and content sliders.

Performance & Optimization
158,007
Downloads
Below average
12
GitHub Stars
Below average
5mo ago
Last Release
0
Open Issues
Build Passing
Ready to install

Build Tests

Composer Install
DI Compile
Templates

Code Quality

CS Coding Standard
9 warnings
PHPStan Level 9

Tested on Magento 2.4.8-p3

Recent Test History

Each release is tested against the latest Magento version at that time.

v1.1.4 on Magento 2.4.8-p3
Dec 26, 2025
GitHub Repository
Source code & docs
Packagist
Version history
Issues & Support
Get help or report bugs

Share This Module's Status

Module Swiper Magento compatibility status badge

README

Loaded from GitHub

Swiper

Swiper - is the free and most modern mobile touch slider with hardware accelerated transitions and amazing native behavior.

And it is as Magento 2 JS Widget.

Swiper version 11.2.6.

Installation

cd <magento_root>
composer require swissup/module-swiper
bin/magento setup:upgrade

Example

Below you can find simple HTML markup to get Swiper slider at Magento 2 frontend:

<div class="swiper-container" data-mage-init='{"Swissup_Swiper/js/swiper" : {"lazy": true, "slidesPerView": 6, "freeMode": true, "loop": true, "autoplay": {"delay": 2500, "disableOnInteraction": false}, "navigation": {"nextEl": ".swiper-button-next", "prevEl": ".swiper-button-prev"}, "breakpoints": {"768": {"slidesPerView": 4}, "600": {"slidesPerView": 3}, "480": {"slidesPerView": 2}}}}'>
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <div class="swiper-lazy-preloader"></div>
            <a href="#"><img class="swiper-lazy" data-src="{{media url=&quot;wysiwyg/brands/ancestry.png&quot;}}" alt="" width="200" height="78"/></a>
        </div>
        <div class="swiper-slide">
            <div class="swiper-lazy-preloader"></div>
            <a href="#"><img class="swiper-lazy" data-src="{{media url=&quot;wysiwyg/brands/expedia.png&quot;}}" alt="" width="200" height="78"/></a>
        </div>
        <div class="swiper-slide">
            <div class="swiper-lazy-preloader"></div>
            <a href="#"><img class="swiper-lazy" data-src="{{media url=&quot;wysiwyg/brands/skyscnr.png&quot;}}" alt="" width="200" height="78"/></a>
        </div>
        <div class="swiper-slide">
            <div class="swiper-lazy-preloader"></div>
            <a href="#"><img class="swiper-lazy" data-src="{{media url=&quot;wysiwyg/brands/twtr.png&quot;}}" alt="" width="200" height="78"/></a>
        </div>
        <div class="swiper-slide">
            <div class="swiper-lazy-preloader"></div>
            <a href="#"><img class="swiper-lazy" data-src="{{media url=&quot;wysiwyg/brands/uber.png&quot;}}" alt="" width="200" height="78"/></a>
        </div>
        <div class="swiper-slide">
            <div class="swiper-lazy-preloader"></div>
            <a href="#"><img class="swiper-lazy" data-src="{{media url=&quot;wysiwyg/brands/viber.png&quot;}}" alt="" width="200" height="78"/></a>
        </div>
    </div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
</div>

More details about options you can find at Swiper API.

This content is fetched directly from the module's GitHub repository. We are not the authors of this content and take no responsibility for its accuracy, completeness, or any consequences arising from its use.

Back to All Modules