包简介

Basic integration of Swiper into Magento 2

README 文档

README

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.

swissup/module-swiper 适用场景与选型建议

swissup/module-swiper 是一款基于 JavaScript 开发的 Composer 扩展包，目前已累计 175.79k 次下载、GitHub Stars 达 13，最近一次更新时间为 2020 年 10 月 07 日，在 PHP 生态内属于活跃度较高的组件。

它主要适用于以下技术方向：「carousel」「swiper」「magento slider」等业务场景。在实际项目中，围绕这些方向常见需要落地的问题包括：接口对接、性能调优、并发安全、与既有框架（Laravel / ThinkPHP / Yii / Webman 等）的兼容适配，以及生产环境的日志埋点与稳定性保障。

我们在过去多个企业项目中使用过 swissup/module-swiper 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。

围绕 swissup/module-swiper 我们能提供哪些服务？

定制开发 / 二次开发

基于 swissup/module-swiper 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。

BUG 修复 & 性能优化

线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。

项目外包 & 长期维护

承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。

yvsm@zunyunkeji.com QQ：316430983 微信：yvsm316 西安尊云信息科技 · 专注 PHP / Go / 分布式系统研发