README

hyva-splide-js

在 SplideJS 库 中实现，适用于 Hyvä Theme for Magento 2

您不再需要担心如何在您的 Magento 2 Hyvä Theme 项目中实现 SplideJS。
无需任何操作，安装后即可立即使用。

Splide 是按需加载的，不会影响性能，请参阅 Hyvä 文档。

工作原理 • 安装 • 使用 • 更多模块

工作原理

该模块会在所有至少包含一个具有 CSS 类 splide（SplideJS 所需的类）的 DOM 元素的页面上简单地加载 SplideJS
（该类由 SplideJS 需要）。

当库加载到页面上时，存储在 Alpine.store 中的状态会更新，表明 SplideJS 已准备好使用。

该状态也可以用于在任何时候强制加载库，以下是一个使用 forceLoad() 的示例

安装

要求

• Hyvä Magento 2 主题

composer require blackbird/hyva-splide-js

php bin/magento setup:upgrade

在生产模式下，不要忘记重新编译和重新部署静态资源。

使用

安装模块后，只需添加创建滑块所需的 HTML 代码，如 SplideJS 文档 中所述

<section class="splide" id="my-slider">
  <div class="splide__track">
    <ul class="splide__list">
      <li class="splide__slide">Slide 01</li>
      <li class="splide__slide">Slide 02</li>
      <li class="splide__slide">Slide 03</li>
    </ul>
  </div>
</section>

接下来，创建一个函数来监听 Alpine.store 状态 is_loading，表示 SplideJS 已加载，并将 Splide 应用于 HTML 元素，如 SplideJS 文档 中所述。

<?php
use \Blackbird\HyvaSplideJs\Api\HyvaSplideJSInterface;
?>
<script>
    function myXData () {
        return {
            initSlider() {
                if (Alpine.store('<?= HyvaSplideJSInterface::HYVA_SPLIDE_JS ?>').is_loaded) {
                    new Splide('#my-slider', {
                        ...options
                    }).mount();
                }
            }
        }
     }
</script>

您可以根据需要指定 SplideJS 的任何选项，如此处 所示

最后，设置 x-data 指令，并不要忘记在一个 x-effect 中调用先前的函数，以防止在库加载之前应用 Splide，并在库加载时自动应用它。

<section class="splide" id="my-slider" x-data="myXData()" x-effect="initSlider">
  ...
</section>

完整示例

<?php
use \Blackbird\HyvaSplideJs\Api\HyvaSplideJSInterface;
?>
<section class="splide" id="my-slider" x-data="myXData()" x-effect="initSlider">
  <div class="splide__track">
    <ul class="splide__list">
      <li class="splide__slide">Slide 01</li>
      <li class="splide__slide">Slide 02</li>
      <li class="splide__slide">Slide 03</li>
    </ul>
  </div>
</section>
<script>
    function myXData () {
        return {
            initSlider() {
                if (Alpine.store('<?= HyvaSplideJSInterface::HYVA_SPLIDE_JS ?>').is_loaded) {
                    new Splide('#my-slider', {
                        ...options
                    }).mount();
                }
            }
        }
     }
</script>

您可以根据需要指定 SplideJS 的任何选项，如此处 所示

示例：使用 forceLoad()

想象以下情况：您的 DOM 中没有具有默认 splide 类的元素，并且当用户操作触发时，您想使用 SplideJS 添加滑块。

在这种情况下，Splide 默认不会加载到页面上，您必须明确请求加载 Splide。

Alpine.store('<?= HyvaSplideJSInterface::HYVA_SPLIDE_JS ?>').forceLoad()

或者

$store.<?= HyvaSplideJSInterface::HYVA_SPLIDE_JS ?>.forceLoad()

要了解确切使用哪个，请参阅 Alpine 的官方文档中的 $store 或 Alpine.store。

这将强制库在页面上加载，即使没有元素有 splide 类。然后您可以遵循经典的 使用方法 程序来应用 Splide。

更多模块

hyva-photo-swipe : Hyvä Theme for Magento 2 的 PhotoSwipe 库实现，全屏相册滑块，可缩放且高度可定制。