轮播-swiper | 蛇年大吉
作者: YuAng
·
2022-11-13
·
via 蛇年大吉
文章轮播图
这次新增了一个文章轮播图插件和beaudar评论，beaudar评论在配置文件里将beaudar.on设为true，然后将仓库设置为自己的github仓库即可。
beaudar：https://beaudar.lipk.org/
言归正传:
轮播事例
展示多个，宽度最小
事例代码
1
2
3
4
5
6
7
| {% swiper width:multiple %}
{% endswiper %}
|
默认
事例代码
1
2
3
4
5
| {% swiper %}
{% endswiper %}
|
展示一个，填充整个容器
事例代码
1
2
3
4
5
| {% swiper width:fill %}
{% endswiper %}
|
无描述文字
事例代码
1
2
3
4
5
6
7
| {% swiper width:multiple %}
{% endswiper %}
|
跳转链接
使用原生img标签，加上href属性即可，例如点击图片跳转到百度，则加上href=”https://baidu.com" 属性
事例代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| {% swiper width:fill %}
<img src="https://pic2.zhimg.com/80/v2-b72c5a1840b763674a5a1744cb49f08b_1440w.jpg" href="https://baidu.com" alt="点击跳转百度">
<img src="https://pic1.zhimg.com/80/v2-9a1f1ad66d08747642c1b66727fea9f6_1440w.jpg" href="https://github.com/yuang01/hexo-theme-bamboo" alt="点击跳转github">
<img src="https://pic1.zhimg.com/80/v2-e012e11ff2cd3270df046e3cd4fb9fbe_1440w.jpg" href="https://juejin.cn/" alt="点击跳转到掘金社区">
<img src="https://pic1.zhimg.com/80/v2-e012e11ff2cd3270df046e3cd4fb9fbe_1440w.jpg" href="/" alt="点击跳转到首页">
{% endswiper %}
{% swiper %}
<img src="https://pic2.zhimg.com/80/v2-b72c5a1840b763674a5a1744cb49f08b_1440w.jpg" href="https://baidu.com" alt="点击跳转百度">
<img src="https://pic1.zhimg.com/80/v2-9a1f1ad66d08747642c1b66727fea9f6_1440w.jpg" href="https://github.com/yuang01/hexo-theme-bamboo" alt="点击跳转github">
<img src="https://pic1.zhimg.com/80/v2-e012e11ff2cd3270df046e3cd4fb9fbe_1440w.jpg" href="https://juejin.cn/" alt="点击跳转到掘金社区">
<img src="https://pic1.zhimg.com/80/v2-e012e11ff2cd3270df046e3cd4fb9fbe_1440w.jpg" href="/" alt="点击跳转到首页">
{% endswiper %}
|
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。
