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

释放双眼,带上耳机,听听看~!

前言

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

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

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

幻灯设置

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

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

这里解读一下这些设置:

  • 模块标题和模块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可能是更轻量的缘故吧。

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

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

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

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

附件下载

码字不容易,源码下载酌情支持一波。下载的文件可以作为子主题直接上传后台使用,不影响升级,有问题可以随时联系本胖技术支持。使用极主题的用户需要付费调试(一包烟钱即可)。

 

下载权限

查看
  • 免费下载
    评论并刷新后下载
    登录后下载

查看演示

  • {{attr.name}}:
您当前的等级为
登录后免费下载登录 小黑屋反思中,不准下载! 评论后刷新页面下载评论 支付以后下载 请先登录 您今天的下载次数(次)用完了,请明天再来 支付积分以后下载立即支付 支付以后下载立即支付 您当前的用户组不允许下载升级会员
您已获得下载权限 您可以每天下载资源次,今日剩余
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。本站所有内容均由李哒胖子原创,码字不易,欢迎打赏。如需在使用过程中有遇到任何问题,可以随时联系本人+V18003862798!!!

给TA打赏
共{{data.count}}人
人已打赏
7b2二次开发

使用7B2打造一个属于自己的导航页面

2023-10-24 13:03:55

7b2二次开发

7B2主题优化之无间距瀑布流模板

2024-1-19 11:36:52

3 条回复 A文章作者 M管理员
  1. 帖子啥情况不能用

    • 幻灯组件没有问题,我首页下边的是而开的专题模块

  2. 这个二开的专题模块在哪里呀