anilla Views 套件 FLASHCRPTB FlashCrptb是一套包含十个功能强大的 Drupal 模块的集合，旨在利用纯粹、轻量级的 Vanilla JavaScript 增强 Drupal Views 的视觉和交互体验。这些模块最初作为Paragraphs Bundles开发，包括Accordion、Basic Carousel、3D Carousel、3D FlipBox、Hero、Lightbox、Parallax、Reveal、Slideshow和Tabs。
此外，我还为每个模块创建了演示：手风琴演示、3D轮播演示、轮播演示、3D翻转框演示、英雄演示、灯箱演示、视差滚动演示、揭示演示、幻灯片演示和标签页演示。
要开始使用，请观看我们的视频演示，其中包含有关如何有效使用该模块的分步指南。您可以在这里探索我们的混合演示：在线演示一|在线演示二。在线演示网站使用Solo主题构建。
概述
Views Vanilla JavaScript Slideshow (VVJS)模块（机器名称：）vvjs是一个轻量级、高性能的解决方案，可直接从 Drupal Views 创建动态且易于访问的幻灯片。它完全使用原生 JavaScript构建，避免了对 jQuery 的依赖，从而提供更快的性能并符合现代 Drupal 10/11 标准。
VVJS 由Awesome Slideshow Engine 提供支持，这是一个统一的脚本，可用于视图和基于段落的幻灯片。它提供一致的行为、更佳的可访问性、更好的移动交互以及对动态内容的强大处理能力——同时保持 VVJS 的简洁性和灵活性。
主要特点
完全不依赖 jQuery — 仅使用原生 JavaScript，实现快速、现代的性能（Drupal 10/11）。
根据每张幻灯片的内容自动调整高度。
自动播放时间——无，或每张幻灯片 2-15 秒，间隔可配置。
启用自动播放时，会显示播放/暂停按钮和动画进度条。
滑动计数器——可选“1/N”显示。
导航选项——点、数字或无；当幻灯片很多时，点是可滚动的（可配置最大宽度）。
箭头位置——无、两侧、两侧（仅限大屏幕）、顶部或顶部（仅限大屏幕）。
幻灯片动画——无、缩放、淡入淡出或从上/下/左/右滑动。
过渡效果——当动画为“无”时：即时切换，或交叉淡入淡出（经典、分阶段或动态），持续时间可配置（200-2000 毫秒）。
完全支持键盘——方向键、空格键（暂停/播放）、Home/End键（第一张/最后一张幻灯片）。
移动设备上的触摸和滑动导航（可以禁用）。
鼠标悬停时暂停和循环播放（开/关）。
起始索引— 选择首先显示的幻灯片（例如，对于交错式多幻灯片布局）。
英雄幻灯片模式——全宽英雄，带有叠加内容；第一个字段可以是图像或媒体字段；叠加位置（12 个选项）、背景颜色和不透明度；响应式断点。
响应式断点——布局/箭头行为的断点为 576、768、992、1200 或 1400 px。
每个实例使用唯一 ID，以避免多个幻灯片出现在同一页面上时发生冲突。
可选的默认 CSS — 可以禁用以实现完全自定义样式。
无障碍功能— ARIA 角色、焦点管理、实时区域公告、减少动作处理。aria-hiddentabindex
深度链接——指向特定幻灯片的可共享 URL（例如#gallery-3）。
自定义令牌——以及使用“使用第一行的替换令牌”时视图的页眉/页脚/空文本。[vvjs:field_name][vvjs:field_name:plain]
JavaScript API — 自定义缩略图、外部控件和分析的程序化控制（goToSlide、pause、resume、getCurrentSlide、事件）。
新增：过渡样式
VVJS 现在包含多种过渡类型，可直接在视图 UI 中选择：
交叉淡入淡出 - 经典
淡入淡出 - 分阶段
交叉淡入淡出 – 动态
这些过渡效果在幻灯片设置中以选项的形式呈现，并与自动播放、导航、辅助功能处理和英雄模式无缝集成。
新增：深度链接和可编程控制
使用深度链接分享特定幻灯片
VVJS 现在支持深度链接，使用户能够直接链接到幻灯片中的特定幻灯片。深度链接非常适合营销活动、社交媒体分享和协作工作流程，它可以将您的幻灯片从被动展示转变为交互式、可分享的体验。
启用此功能后，每张幻灯片都会生成一个唯一的 URL 片段（例如，https://example.com/slides/ #gallery-3），该片段会显示在浏览器的地址栏中。用户可以收藏喜欢的幻灯片，通过电子邮件或社交媒体分享特定内容，并能返回到上次离开的位置。此功能对于以下情况尤为重要：
作品集展示——直接链接至精选作品
产品展示厅——向客户展示特定产品
活动亮点——引导游客关注关键时刻
教育内容——在演示文稿中引用特定幻灯片
多幻灯片页面– 使用唯一标识符管理多个图库
功能强大的 JavaScript API，可用于自定义集成
除了深度链接之外，VVJS 还提供了一个全面的 JavaScript API，使开发者和网站构建者能够在不修改模块核心的情况下创建自定义导航体验。您可以构建缩略图库、集成自定义过滤器、同步多个幻灯片，或创建全新的交互模式——所有这些都可以通过简洁且文档齐全的 API 实现。
常见应用场景：
自定义缩略图导航– 创建一个单独的缩略图视图来控制主幻灯片。
外部控件– 向菜单、模块或自定义界面添加幻灯片导航
程序化导航——根据用户操作、搜索结果或筛选内容跳转到相应幻灯片
分析集成– 追踪哪些幻灯片互动最多
多幻灯片协调——同步相关幻灯片或创建前后对比图
简单直观的 API：
// Navigate to slide 3 in the 'gallery' slideshow
Drupal.vvjs.goToSlide('gallery', 3);
// Get current state
const current = Drupal.vvjs.getCurrentSlide('gallery');
const total = Drupal.vvjs.getTotalSlides('gallery');
// Control playback
Drupal.vvjs.pause('gallery');
Drupal.vvjs.resume('gallery');
该 API 的设计遵循 Drupal 编码标准，并具备完善的错误处理机制，使其能够可靠地用于生产环境。所有方法都会返回有意义的值，使开发人员能够构建响应迅速、用户友好的界面，并能根据幻灯片状态的变化进行调整。
重要性：现代网站需要灵活性。无论您是为创意机构构建作品集、电商产品展示网站，还是教育资源库，VVJS 现在都能提供相应的工具，助您打造用户所需的完美体验——无需开发自定义模块或采用复杂的变通方案。
无障碍
VVJS遵循现代无障碍标准：
用于宣布幻灯片切换的正确 ARIA 角色。
开箱即用，支持键盘导航。
焦点管理，确保只有当前活动幻灯片可访问。
配置
所有选项均可在视图用户界面中的“格式”→“设置”下进行配置：
英雄幻灯片——启用/禁用；布局（最大宽度、最小高度、内容宽度百分比）；叠加层（位置、背景颜色、不透明度）。
响应式——布局断点为 (576–1400 px)，箭头为“仅限大屏幕”。
深度链接——启用/禁用；URL 标识符（例如gallery用于#gallery-3）。
计时和自动播放— 自动前进间隔（无，2-15 秒）。
导航——箭头（无、侧边、仅限侧边大屏幕、顶部、仅限顶部大屏幕）；指示器（无、点、数字）；可滚动点的最大宽度。
动画和过渡— 滑动动画（无、缩放、淡入淡出、从上/下/左/右滑动）；当为“无”时，过渡类型（即时、交叉淡入淡出经典/分阶段/动态）和持续时间。
显示选项——显示幻灯片总数；显示进度条；显示播放/暂停按钮。
行为— 悬停时暂停；启用滑动；启用键盘；启用循环；开始索引。
高级功能——启用/禁用默认 CSS。
自定义令牌（视图头部/底部）
当使用“全局：文本区域”或“全局：未过滤文本”并启用“使用第一行的替换标记”时，默认的 Views 标记将无法正常工作。请改用 VVJS 自定义标记：
{{ title }}→[vvjs:title]
{{ field_image }}→[vvjs:field_image]
追加:plain以去除 HTML，例如： [vvjs:title:plain]
注意：标记会从已渲染的字段中提取数据。不支持复杂的重写表达式；请根据需要使用单个字段标记。 [vvjs:*]
用法示例
创建或编辑视图。
在“格式”部分，选择“视图 Vanilla JavaScript Slideshow”。
配置幻灯片播放选项。
保存视图并预览幻灯片。
依赖关系
该模块保持独立——不需要任何依赖项。
安装
从Drupal.org下载并安装 VVJS 模块：
composer require drupal/vvjs
通过 Drupal 管理界面或使用 Drush 启用该模块：
drush en vvjs
清除缓存以确保新插件可用：
drush cr
支持
如有任何问题、功能请求或贡献，请访问Drupal.org 上的 问题队列。
幻灯片 — 开发人员和网站建设者技巧
使用此插件的每个视图都会添加CSS 类。vvj-slideshowjs-view-dom-id
对于首页横幅幻灯片，请将行样式设置为“字段”，且至少包含两个字段。第一个字段必须是图像或媒体字段（图像或响应式图像格式文件；不能是纯 URL）。该字段可以可点击。所有其他字段均用于首页横幅叠加层的内容。
在配置的响应式断点以下，英雄布局会折叠成普通卡片。
标记：幻灯片放在一个单独的容器中，底部导航栏放在单独的容器中，幻灯片指示器（箭头）放在单独的容器中。活动幻灯片和活动导航按钮会获得一个类。<div><div><div>active
模块限制通知：分组字段功能
请注意，此模块的当前版本不支持Drupal Views 中的“
分组字段
”功能。 “分组字段”选项允许您按指定字段对记录进行分组，
但此功能与模块的当前实现不兼容。
为确保视图的正常功能和显示， 我们建议避免将此模块的此功能与此功能一起使用。
评论