README

Swiper图库是针对媒体图库的Swiper自定义集成。

简介

此模块提供了一种字段格式化器，允许媒体图库以预配置的Swiper图库的形式渲染。

特性

桌面和移动模式，自动在两者之间切换。
桌面模式：带有缩略图的循环水平幻灯片。
移动模式：垂直幻灯片。
在每个x张图像后插入分界块。
通过URL导航到幻灯片，并可选择为每个幻灯片替换历史记录。
如果有IVW和GTM，则跟踪页面浏览量。

限制

无需配置Swiper实例，所有设置都是预配置的。
图库幻灯片不能与响应式图像样式一起使用。

浏览器支持

要求

D8媒体核心模块 | Drupal.org

支持的模块

以下模块支持开箱即用的页面浏览量跟踪

当检测到相应的JS对象时，它将跟踪每个幻灯片的浏览量。

可以通过分界块插入广告实体（参见作为分界符的广告实体）

广告实体 | Drupal.org

安装

按常规安装贡献的Drupal模块的方式安装此模块。有关更多信息，请参阅安装Drupal 8模块。

配置

要启用图库，必须将媒体图库的字段格式化器设置为Swiper图库（参见图库格式化器）。

由于幻灯片和预览的查看模式也可以配置，因此应首先设置它们（参见图像查看模式）。

由于需要更改图像标签以便能够使用Swiper进行懒加载，因此对于图库幻灯片，必须使用单独的图像样式。这通过预处理器钩子完成（参见swiper_gallery_preprocess_image()）。

然后必须将用于幻灯片的图像样式添加到设置文件中。如果安装过程中没有这样做，请将/config/install/swiper_gallery.settings.yml复制到Drupal的配置目录中，并在slide_image_styles变量中添加一个或多个图像样式。

图像查看模式

添加并配置图库的图像查看模式

转到/admin/structure/media/manage/image/display
设置以下内容的查看模式
- 图库本身（例如：swiper gallery）
- 图库内的幻灯片（swiper gallery slide）
- 媒体预览的预览图像（swiper gallery media preview）
- 缩略图预览的预览图像（swiper gallery thumbs preview）
- 缩略图预览中的缩略图（swiper gallery thumbs preview thumb）
为相册幻灯片创建一个样式并设置在幻灯片查看模式下

图库格式化器

选择并配置 Swiper Gallery 字段格式化器

转到 /admin/structure/media/manage/gallery/display
添加并选择相册查看模式（swiper gallery）
在 媒体图片 中选择格式 Swiper Gallery
打开字段格式化器设置并分配查看模式
可选地配置其他设置，如启动器文本或中断块

自定义懒加载图标

要设置自定义加载图标，将 scss（或其 css 等价物）添加到您的主题中，例如：

.gallery {
  .gallery-slide .swiper-lazy-preloader {
    animation: none;
    &:after {
      all: initial;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      content: url('/assets/images/infinity-loader.gif');
      background: transparent;
    }
  }
}

作为分界符的广告实体

如果您想在每 x 张幻灯片上显示 AdEntity，可以将中断配置为 AdDisplay 块。

由于我们在广告加载方面遇到了问题，您需要禁用中断中使用的广告实体的初始化。广告将由相册初始化（参见 build/src/components/05-gallery/gallery-ads.js）

这是因为 swiper 的循环功能，它会生成幻灯片的副本并将它们放在主要幻灯片前后。广告实体模块将初始化第一个广告幻灯片，这是一个副本，但可见的广告幻灯片将保持未初始化。

开发/贡献

对于开发，您可以使用演示作为起点。您可以在 Docker 容器中设置一个开发环境，该容器包含完整的 Drupal 安装、测试内容和自动测试。

有关如何构建资产的信息，请参阅 build/README.md

演示

在 Docker 容器中的 Drupal 演示安装中尝试相册。访问 https://github.com/drunomics/swiper-gallery-demo 并按照 README 操作。

维护者

Mathias (mbm80) - https://www.drupal.org/u/mbm80

支持的组织

drunomics - https://www.drupal.org/drunomics

drunomics / swiper_gallery

维护者

详细信息