logo

额外区块类型 (EBT) - 全新的布局构建器体验❗

额外区块类型 (EBT) - 样式化、可定制的区块类型:幻灯片、标签页、卡片、手风琴等更多类型。内置背景、DOM Box、JavaScript 插件的设置。立即体验布局构建的未来。

演示 EBT 模块 下载 EBT 模块

❗额外段落类型 (EPT) - 全新的 Paragraphs 体验

额外段落类型 (EPT) - 类似的基于 Paragraph 的模块集合。

演示 EPT 模块 滚动

滚动

3.5.5. Views Slideshow —— 通过 Views 显示 jQuery 幻灯片与轮播

17/10/2025, by Ivan

在 Drupal 7 中,有许多模块用于将不同的 jQuery 幻灯片插件与 Drupal 集成。其中最受欢迎、最方便的当属 Views Slideshow 模块。它的一个缺点是:在 Drupal 7 版本中,它并不是响应式的。而在 Drupal 8 版本中,这个问题已经得到了解决,因此我们将使用 Views Slideshow 来制作幻灯片。

首先,需要下载并安装 Views Slideshow 模块,同时启用其子模块 Views Slideshow Cycle

https://www.drupal.org/project/views_slideshow

此外,我们还需要额外的 jQuery 库,这些库需要放在网站根目录下的 libraries 文件夹中(如果不存在,请手动创建)。

/libraries/jquery.hoverIntent/jquery.hoverIntent.js

https://github.com/briancherne/jquery-hoverIntent

/libraries/jquery.cycle/jquery.cycle.all.js

http://malsup.github.io/jquery.cycle.all.js

/libraries/json2/json2.js

https://raw.githubusercontent.com/douglascrockford/JSON-js/master/json2.js

当这些库都准备好后,我们可以创建一个通过 Views Slideshow 输出的视图。首先创建一个内容类型,或使用已有的内容类型(需要包含图片字段)。例如,这里我使用 Gallery 内容类型,字段名为 Photo

Drupal 8 views slideshow

接着创建一个 Views,选择显示格式为 Views Slideshow(Slideshow)

drupal 8 views slideshow

此时我们就拥有了一个带有丰富设置选项的幻灯片。在 Format(格式) 一栏点击 Settings(设置),我们来详细了解 Views Slideshow 的功能。

Drupal 8 Views slideshow

行类(Row class):默认情况下,Views 行的类名为 views-row,在此可以为每个幻灯片设置额外的自定义类名。

样式(Style)
皮肤(Skin):你可以为 Views Slideshow 添加或选择不同的样式皮肤。初始仅提供默认皮肤,但你可以通过安装附加模块来扩展样式选项。

https://www.drupal.org/node/909020

幻灯片(Slides)
幻灯片类型:选择所使用的 jQuery 插件。例如,可使用 FlexSlider Views Slideshow

https://www.drupal.org/project/flexslider_views_slideshow

切换效果(Slideshow Type)
这里可以设置幻灯片切换的方式。

Effect(效果):切换可以使用多种过渡效果。比如选择 scrollHorz,幻灯片将以 jQuery 轮播(carousel)的形式显示。

高级切换设置(View Transition Advanced Options)

Drupal 8 Views slideshow

Timer delay(延迟时间):两次幻灯片切换之间的时间间隔。

Speed(速度):单次切换动画的持续时间。

Initial slide delay offset(初始延迟):首次播放前的等待时间,这样用户在加载慢的网站上也能看到第一张幻灯片。

Random(随机):幻灯片可随机播放。

动作(Action)

此部分用于控制幻灯片的暂停、启动与高度设置。

Pause On Click:点击幻灯片时暂停播放。

Pause on mouse click:同样作用于点击事件时暂停。

高级动作选项(View Action Advanced Options)

Start Slideshow Paused:幻灯片初始状态为暂停,需鼠标悬停或点击后启动。

Start On Last Slide Viewed:记录用户上次浏览的幻灯片,下次访问时从相同位置继续播放。

Pause When the Slideshow is Not Visible:当幻灯片不在屏幕可视范围内时暂停播放,这在着陆页(Landing Page)中非常实用。

End slideshow after last slide:播放完最后一张幻灯片后停止循环。

Make the slide window height fit the largest slide:自动调整幻灯片容器高度,使其与最高的幻灯片相匹配。若幻灯片高度差距大,会导致页面跳动,建议保持图片高度一致。

Items per slide:在这里可设置每页显示的幻灯片数量。若设为多个并配合 scrollHorz 效果,则可实现类似 jQuery Carousel 的布局。

Wait for all the slide images to load:等待所有图片加载完成后再开始切换。若图片过大,可禁用此选项。

IE 调整(Internet Explorer Tweaks)

若幻灯片中没有文本或背景色,可忽略此设置,它仅在 IE 中有效。

高级 jQuery Cycle 设置:关于 jQuery Cycle 的高级自定义,我们将在单独课程中讲解。

小部件(Widgets):可以在幻灯片顶部或底部显示切换按钮。

控制项(Controls):可以启用“上一张 / 下一张”文本链接,并通过 CSS 自定义按钮样式。我们将在基于 Bootstrap 的主题开发章节中学习如何美化它。

幻灯片计数器(Slide counter):显示总幻灯片数量以及当前播放的编号。

分页器(Pager):可以为幻灯片添加分页点。方法是:在视图输出中添加“Views 结果计数器”字段,并在 Pager 设置中选用该字段。稍后我们将在“基于 Bootstrap 的主题”课程中介绍如何为 Drupal 8 及更高版本创建分页点切换效果。

现在,你可以尝试创建一个基于 Views Slideshow 的幻灯片。如果遇到问题,欢迎在评论区留言,我们将一起解决。