轮播-swiper
发表于:2022-11-13 | 分类: 前端
字数统计: 712 | 阅读时长: 3分钟 | 阅读量:

文章轮播图

这次新增了一个文章轮播图插件和beaudar评论,beaudar评论在配置文件里将beaudar.on设为true,然后将仓库设置为自己的github仓库即可。
beaudar:https://beaudar.lipk.org/

言归正传:

轮播事例


展示多个,宽度最小

事例代码

1
2
3
4
5
6
7
{% swiper width:multiple %}
![图片描述111](https://pic2.zhimg.com/80/v2-b72c5a1840b763674a5a1744cb49f08b_1440w.jpg)
![图片描述22222](https://pic1.zhimg.com/80/v2-9a1f1ad66d08747642c1b66727fea9f6_1440w.jpg)
![图片描述33333](https://pic1.zhimg.com/80/v2-e012e11ff2cd3270df046e3cd4fb9fbe_1440w.jpg)
![图片描述44444](https://pic1.zhimg.com/80/v2-6d0cbd4380b4959542d3f5da31c7f20c_1440w.jpg)
![图片描述55555](https://pica.zhimg.com/80/v2-dff5af5b4e0331e3b9c22ef1004d88c8_1440w.jpg)
{% endswiper %}

默认

事例代码

1
2
3
4
5
{% swiper %}
![图片描述](https://pic2.zhimg.com/80/v2-b72c5a1840b763674a5a1744cb49f08b_1440w.jpg)
![图片描述](https://pic1.zhimg.com/80/v2-9a1f1ad66d08747642c1b66727fea9f6_1440w.jpg)
![图片描述](https://pic1.zhimg.com/80/v2-e012e11ff2cd3270df046e3cd4fb9fbe_1440w.jpg)
{% endswiper %}

展示一个,填充整个容器

事例代码

1
2
3
4
5
{% swiper width:fill %}
![图片描述](https://pic2.zhimg.com/80/v2-b72c5a1840b763674a5a1744cb49f08b_1440w.jpg)
![图片描述](https://pic1.zhimg.com/80/v2-9a1f1ad66d08747642c1b66727fea9f6_1440w.jpg)
![图片描述](https://pic1.zhimg.com/80/v2-e012e11ff2cd3270df046e3cd4fb9fbe_1440w.jpg)
{% endswiper %}

无描述文字

事例代码

1
2
3
4
5
6
7
{% swiper width:multiple %}
![](https://pic2.zhimg.com/80/v2-b72c5a1840b763674a5a1744cb49f08b_1440w.jpg)
![](https://pic1.zhimg.com/80/v2-9a1f1ad66d08747642c1b66727fea9f6_1440w.jpg)
![](https://pic1.zhimg.com/80/v2-e012e11ff2cd3270df046e3cd4fb9fbe_1440w.jpg)
![](https://pic1.zhimg.com/80/v2-6d0cbd4380b4959542d3f5da31c7f20c_1440w.jpg)
![](https://pica.zhimg.com/80/v2-dff5af5b4e0331e3b9c22ef1004d88c8_1440w.jpg)
{% 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 %}
上一篇:
首页github日历
下一篇:
主题config配置项简介