最新消息
  • 您好下载中心的主题现已开启全免费下载!
  • 通过购买升级账户到相应的用户组 36元/6个月、24元/季度、7元/月、4元/周。 免费用户组升级
  • 欢迎 游客 您的光临,下载之前请先阅读 下载资源说明 少走弯路。任何技术问题请在论坛提问,本站定制插件售前、售后问题请联系QQ:5916171
  • 点击链接加入群聊【XenForo讨论社区】:群号:143277648

技巧教程 给论坛加入Layui轮播!

普通会员
UID
923
注册
2020/07/09
消息
27
黄金
874.50G
    OS X Chrome 84.0.4147.135
  • #1
第一次发教程 dalao别喷哈:icon-evil:
首先 新建一个头部小工具
Screenshot 2020-08-29_12-55-55-782.png
随便给他定义个key
选择在首页顶部
1598677048912.png
部署我们经典的Layui
可以食用cdn:
layui cdn接入:
<link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
<script src="https://www.layuicdn.com/layui/layui.js"></script>
<script type="text/javascript">
    layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element'], function() {
      var laydate = layui.laydate //日期
      ,laypage = layui.laypage //分页
      ,layer = layui.layer //弹层
      ,table = layui.table //表格
      ,carousel = layui.carousel //轮播
      ,upload = layui.upload //上传
      ,element = layui.element; //元素操作 等等...
    });
</script>
(复制就好啦
然后继续加入轮播框
HTML:
<div class="layui-carousel" id="lunbo">
  <div carousel-item>
    <div>轮播1</div>
    <div>轮播2</div>
  </div>
</div>
<script>
layui.use('carousel', function(){
  var carousel = layui.carousel;
  carousel.render({
    elem: '#lunbo'
    ,width: '100%' //设置容器宽度
    ,arrow: 'always' //始终显示箭头
  });
});
</script>
<div>后面可以加html元素比如img等
然后 轮播框就完成啦

:icon-evil::icon-evil:
 
普通会员
UID
923
注册
2020/07/09
消息
27
黄金
874.50G
    OS X Chrome 84.0.4147.135
  • #2
补上效果图(没设置100%

1598677846307.png
另外 图片建议设置宽高100%防止被拉伸:icon-razz:
-----------
加上100%以后
1598678128847.png
HTML:
width="100%" height="100%"
 

附件

  • 1598677718988.png
    1598677718988.png
    373.8 KB · 查看: 1
打酱油的路过~~
管理成员
UID
255
注册
2019/01/25
消息
442
黄金
3,231.18G
    Windows 10 Chrome 80.0.3987.149
  • #3
支持每一位创作者!
 

相似主题

  • 讨论
技巧教程 给你的网站添加一个“每日一言”小工具 [阅读权限 5 消息 ]
3
317
  • 讨论
技巧教程 给你的网站添加一个看板娘! [阅读权限 5 消息 ]
13
562
  • 讨论
模板修改 XenForo去版权教程 [阅读权限 8 消息 ]
2
956
  • 讨论
模板修改 在导航栏中添加“Font Awesome”图标 [阅读权限 5 消息 ]
4
458
顶部 底部