7B2模板幻灯片组件美化修改

前言

在更新了B2最新版本以后，发现幻灯片还是一如既往的平平无奇。顺手做了一波改造，DEMO效果如图

其实基于幻灯片的改造很简单，只需要找到模板文件了解模版函数以后，再阅读一下幻灯组件JS的一些API。再掌握基本的CSS样式，就可以随心所欲的改造成自己想要的样子。

幻灯设置

幻灯片样式组件一共有6种常用的基本只有大幻灯和小幻灯2。

这里解读一下这些设置：

• 模块标题和模块KEY需要唯一。模块标题配合是否显示幻灯标题设置，可以在前端显示。模块KRY则是给前端添加固定的ID。在写一些固定样式的时候可以用到，并且不影响默认的幻灯片样式。
• 小工具模块责不建议修改。背景颜色或者背景图片可以根据个人需求设置，但是幻灯片为大幻灯+铺满窗口时候这个设置就没意义了。
• 幻灯片内容则是由数组解析。支持所有文章类型（文章，活动，商品等），非大幻灯片建议6个以上。格式已经给了DEMO，查看文章，商品等ID直接去列表查看即可。切户格式一定要准确！！！
• 幻灯高度！！！这玩意儿，多少有些离谱，算法没看明白。总之设置起来意义不大。建议多次尝试，而且在移动端效果很差。
• 可见性-可分桌面和移动端，如果服务器内存带宽勾搭，建议分开两个幻灯片。
• 段代码的调用很简单。可见性选择都不显示，仅在部分页面模板里面调用即可。本站使用7B2打造一个属于自己的导航页面就是用的这个方式新增了搜索模块。

幻灯片改造思路

幻灯片模板文件目录b2\Modules\Templates\Modules\Sliders.php。春哥已经加了备注，对应了6个不同的模板样式。这里解读几个钩子函数：

• $thumb   最重要的图片，使用b2_get_thumb，讲真这个玩意儿相当的不好用。而且幻灯结构还是用的position: absolute布局。导致高度的计算一塌糊涂。
• $v[‘link’]   就是幻灯片的目的链接。
• $data[‘slider_show_title’] ? $cat  则是幻灯片的标题和文章的分类。
• $cat  有对应的结构，如果不需要则可以直接把结构删除即可。

幻灯片JS api

幻灯片的JS并非使用的swiper，而是flickity可能是更轻量的缘故吧。

轻量化的组件还支持移动端，功能也相当的齐全，再解读几个常用的Options吧。

• draggable   拖动功能，值是布尔类型，true和fales
• wrapAround  无限滚动，值是布尔类型，true和fales
• groupCells  幻灯分组，一次性滚动多张图作为一个slider
• autoPlay  自动播放，时间设置这就不多说了
• fade 淡入淡出功能需要flickity-fade 包。它不包含在 中flickity.pkgd.js，必须单独安装。
• initialIndex  初始显示的幻灯片位置 ，数字类型。
• prevNextButtons  上一页下一页的按钮显示，类型为布尔类型
• pageDots 幻灯片页点，类型为布尔类型，全屏幻灯必选。

基本上了解完这些options，就可以打造属于自己的幻灯片了。

附件下载

码字不容易，源码下载酌情支持一波。下载的文件可以作为子主题直接上传后台使用，不影响升级，有问题可以随时联系本胖技术支持。