swissup/module-swiper

Swiper v4 基础集成到 Magento 2 中

维护者

详细信息

github.com/swissup/module-swiper

源代码

问题

安装次数: 109,145

依赖者: 1

建议者: 0

安全性: 0

星级: 10

关注者: 7

分支: 3

公开问题: 0

语言：JavaScript

类型：magento2-module

1.0.13 2024-05-22 11:02 UTC

MIT 3288228c1e4b9221449166b99540adc7dd460a0e

carouselswipermagento slider

This package is auto-updated.

Last update: 2024-09-22 11:38:57 UTC

README

Swiper - 是一个免费的、最现代的移动触摸滑块，具有硬件加速的过渡和惊人的原生行为。

并且它也是 Magento 2 JS 小部件。

安装

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

示例

以下是在 Magento 2 前端获取 Swiper 滑块的简单 HTML 代码。

<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>

有关选项的更多详细信息，请参阅Swiper API。