以上实例代码
{% carousel %}
https://www.runoob.com/try/demo_source/movie.mp4,autoplay,loop,muted,视频描述
/images/suiji/1.jpg,第一张图片描述,https://www.baidu.com/
/images/suiji/2.jpg,第一张图片描述
/video/6.mp4,autoplay,loop,muted,视频描述
/video/8.mp4,autoplay,loop,muted,视频描述
BV1SehnzBEox,1,B站视频示例 - 已适配高度
BV1SehnzBEox,1,另一B站视频示例
{% endcarousel %}
{% carousel 2 %}
https://www.runoob.com/try/demo_source/movie.mp4,autoplay,loop,muted,视频描述
/images/suiji/1.jpg,第一张图片描述,https://www.baidu.com/
/images/suiji/2.jpg,第一张图片描述
{% endcarousel %}
{% carousel 4 %}
/images/suiji/1.jpg,第一张图片描述,https://www.baidu.com/
/images/suiji/2.jpg,第一张图片描述
/images/suiji/3.jpg,第一张图片描述
/images/suiji/4.jpg,第一张图片描述
/images/suiji/5.jpg,第一张图片描述
{% endcarousel %}
1. 插件介绍
这是一款功能丰富的 Hexo 轮播图插件,支持多种媒体类型轮播展示,并具备点击跳转功能。主要特性包括:
支持三种媒体类型:图片、本地视频、B 站视频
支持点击轮播项跳转到指定链接
自动播放功能(鼠标悬停时暂停)
响应式设计,适配不同屏幕尺寸
带指示器和左右切换按钮
无缝轮播效果
支持轮播图数量
例如写法为 {% carousel 4 %} 时表示显示4个轮播图
<!-- 默认配置:1个/屏,高度自动,5秒轮播一次 -->
{% carousel %}
...轮播内容...
{% endcarousel %}
<!-- 自定义:2个/屏,高度300px,3秒轮播一次 -->
{% carousel 2 300px 3 %}
...轮播内容...
{% endcarousel %}
<!-- 自定义:3个/屏,高度50%,10秒轮播一次 -->
{% carousel 3 50% 10 %}
...轮播内容...
{% endcarousel %}
2. 基本用法
在 Markdown 文章中,使用 {% carousel %}` 和 `{% endcarousel %}
标签包裹轮播项内容,每个轮播项单独占一行:
{% carousel %}
轮播项1配置
轮播项2配置
轮播项3配置
{% endcarousel %}
3. 轮播项配置说明
3.1 图片类型
格式:[图片地址, 描述文本, 跳转链接]
(注:描述文本和跳转链接为可选参数)
参数说明:
图片地址:必填,支持 JPG、PNG、GIF 等常见图片格式
描述文本:可选,会显示在轮播项底部的文字说明
跳转链接:可选,点击图片时将跳转的目标地址(支持相对路径和绝对路径)
示例:
{% carousel %}
# 仅包含图片
https://example.com/image1.jpg
# 图片+描述文本
https://example.com/image2.jpg, 这是一张示例图片
# 图片+描述文本+跳转链接
https://example.com/image3.jpg, 点击跳转到首页, /index.html
{% endcarousel %}
3.2 视频类型
格式:[视频地址, 视频属性, 描述文本, 跳转链接]
(注:视频属性、描述文本、跳转链接均为可选参数)
支持的视频属性:
autoplay:视频自动播放
loop:视频循环播放
muted:视频静音播放
参数说明:
视频地址:必填,支持 MP4、WebM 等 HTML5 支持的视频格式
视频属性:可选,可同时指定多个属性(用逗号分隔)
描述文本:可选,轮播项底部显示的文字说明
跳转链接:可选,点击视频时跳转的目标地址
示例:
{% carousel %}
# 仅包含视频
https://example.com/video1.mp4
# 视频+属性
https://example.com/video2.mp4, autoplay, muted
# 视频+属性+描述+链接
https://example.com/video3.mp4, loop, 这是一段示例视频, /video.html
{% endcarousel %}
3.3 B 站视频类型
格式:[BV号, 分P页码, 描述文本, 跳转链接]
(注:分 P 页码默认为 1,描述文本和跳转链接为可选参数)
参数说明:
BV 号:必填,B 站视频的唯一标识符(如 BV1xx411c7mG)
分 P 页码:可选,视频分 P 的页码,默认为 1
描述文本:可选,轮播项底部显示的文字说明
跳转链接:可选,点击视频时跳转的目标地址
示例:
{% carousel %}
# 仅包含B站视频
BV1xx411c7mG
# B站视频+分P+描述
BV1xx411c7mG, 2, 这是B站视频的第2P
# B站视频+分P+描述+链接
BV1xx411c7mG, 3, 点击跳转到B站, https://bilibili.com
{% endcarousel %}
4. 显示效果说明
轮播图会自动适应容器宽度,最大宽度为 1000px
所有轮播项会保持相同高度,确保整体美观
底部会显示指示器,点击可直接切换到对应项
左右两侧有切换按钮,点击可切换上一张 / 下一张
鼠标悬停在轮播图上会暂停自动播放,移开后恢复播放
切换轮播项时,当前播放的视频(包括 B 站视频)会自动暂停
