秦子恒个人介绍

招商魔术师

部分作品：

《0基础一小时快速建站》

《微博营销实战宝典》

《网络招商系统》

《微信4部曲》

现在就加入微信开发QQ群：483987340，跟同行探讨微信公众平台开发。群满就关闭，你得等到下一个群开通才能加入…

网络新时代栏目

esxi教程 (2) 微信商户恢复解封 (17) exchange邮箱,exchange邮件服务器 (2) docker教程 (8) 五菱燃油观光车价格，五菱旅游观光车厂家 (4) 五菱房车，五菱房车官方网站信息 (20) 五菱物流车，五菱运输车 (3) 五菱公交，五菱客车 (24) 村村通客车 (1) 村村通公交 (1) 五菱房车，五菱房车官网 (26) 五菱校车，五菱校车官网国六 (26) exchange (6) 微信支付服务商 (10) 思科网络 (17) powershell教程 (25) 扫码点餐系统 (2) redis教程 (1) 海外小程序 (1) 微信域名防封系统 (2) 海外公众号 (2) 新加坡微信支付 (1) app应用解封 (5) 公众号解封 (16) 微信服务商 (10) 微信域名检测 (10) 恢复微信屏蔽网站 (110) 微信功能直达 (3) 老来网认证教程 (8) 付费视频网站源码 (34) 香港微信支付 (13) 微信境外支付 (18) wordpress付费阅读插件 (15) swoole教程 (14) 女装 (1) wordpress支付插件 (20) 微信服务直达开发 (16) 微信扫码支付开发 (5) wordpress插件开发 (27) 小程序插件 (6) 玩转小程序 (37) 微信沙箱 (21) web-view (40) 社交立减金 (10) 腾讯云 (22) php7 (36) 支付宝小程序 (4) 微信h5支付 (23) 企业微信 (3) 小程序运营 (17) javascript (29) 小程序支付开发 (44) 支付开发 (1) 小程序开发 (93) 微信小程序 (69) 微信买单 (4) 微信商户号 (10) 公众号支付 (20) 微信小店 (7) vim (5) 生活 (3) php订单 (13) 微信开发 (113) 微信公众号 (86) 饥饿营销 (15) 政府网站 (3) 互联网+ (52) nginx (23) apache (9) linux (42) mysql (14) php (36) 跨境电商 (2) 网站运营 (2) 京东运营 (53) 微博运营 (52) 电商运营 (97) 微电影 (1) 网络招商 (7) 网络招商研究 (8) 网络招商案例 (2) 网络招商教程 (12) 网络招商工具 (3) 招商方案动态 (1) 网络招商灵感 (3) 微博营销 (11) 未分类 (47)

网络新时代文章归档

2021年10月 (2) 2021年9月 (15) 2021年8月 (16) 2021年7月 (12) 2021年6月 (20) 2021年5月 (17) 2021年4月 (14) 2021年3月 (1) 2021年2月 (2) 2020年12月 (2) 2020年11月 (16) 2020年10月 (21) 2020年9月 (21) 2020年8月 (20) 2020年7月 (18) 2020年6月 (17) 2020年5月 (25) 2020年4月 (3) 2020年3月 (9) 2020年2月 (4) 2020年1月 (12) 2019年12月 (8) 2019年11月 (19) 2019年10月 (30) 2019年9月 (29) 2019年8月 (23) 2019年7月 (10) 2019年6月 (18) 2019年5月 (15) 2019年4月 (29) 2019年3月 (24) 2019年2月 (2) 2019年1月 (1) 2018年11月 (13) 2018年10月 (29) 2018年9月 (31) 2018年8月 (55) 2018年7月 (64) 2018年6月 (74) 2018年5月 (53) 2018年4月 (71) 2018年3月 (47) 2018年2月 (48) 2018年1月 (72) 2017年12月 (40) 2017年11月 (38) 2017年10月 (17) 2017年9月 (9) 2017年8月 (31) 2017年7月 (20) 2017年6月 (33) 2017年5月 (13) 2017年4月 (4) 2016年12月 (8) 2016年11月 (20) 2016年10月 (19) 2016年9月 (22) 2016年6月 (13) 2017年2月 (32) 2017年3月 (24) 2016年8月 (30) 2016年5月 (1) 2013年8月 (1) 2013年7月 (5) 2013年5月 (1) 2013年6月 (5) 2013年4月 (4) 2013年3月 (1) 2013年2月 (9) 2013年1月 (9) 2012年12月 (5)

首页小程序视频教程 layui轮播高度自适应，layui carousel自动调整高度

这篇文章小编就为大家带来一篇讲解layui轮播高度自适应，layui carousel自动调整高度。小编觉得挺不错的，现在就分享给大家，如果你在找javascript轮播，js轮播，carousel轮播，也可以做个参照。一起跟随小编过来看看吧。

layui轮播高度自适应，layui carousel自动调整高度

作者：小程序爱好者发布时间：2018-09-28

在开发大秦视频付费系统时，使用到layui的轮播组件carousel，默认高度是280px，在电脑端效果可以。但是在手机移动端，就会有空白，所以会通过代码，让layui轮播自动调整高度。

下面的代码参考了官网中的内容 https://fly.layui.com/jie/14318/ css代码

<style>
    /*轮播*/
    .layui-carousel>[carousel-item]{
        overflow: visible;
    }
    .layui-carousel>[carousel-item]>*{
        height: auto;
    }
    .layui-carousel-ind{
        margin-top: -20px;
        top: auto;
        bottom: 10px;
    }
</style>

html代码

<div class="layui-container"> 
    <div class="layui-row">
        <div class="layui-carousel" id="imgbox">
          <div carousel-item id="imgH">
            <div class="img-item"><a href="#"><img src="#" /></a></div>
          </div>
        </div>
    </div>
</div>

js代码

layui.use(['carousel'], function(){
    var carousel = layui.carousel;

    var imgH = document.getElementById('imgbox').querySelector('.img-item').offsetHeight;
    document.getElementById('imgH').style.height = imgH+'px';

    window.onresize = function () {
        var imgH = document.getElementById('imgbox').querySelector('.img-item').offsetHeight;
        document.getElementById('imgH').style.height = imgH+'px';
    };

      //建造实例
      carousel.render({
        elem: '#imgbox'
        ,width: '100%' //设置容器宽度
        ,arrow: 'always' // 悬停显示箭头
        ,indicator: 'inside'
        ,height: 'auto'
      });
});

猛击这里，观看子恒老师《微信公众号后台开发》系列视频了解实现过程和下载相关源代码

php手机短信接口，php手机验证码代码，php编程手机注册发验证码

小程序开放服务商，让开发者和商家更容易对接，什么人能成为小程序服务商——玩转小程序123

声明：部分文章或图片未能及时与原作者取得联系，若来源标注错误或侵犯到您的权益烦请告知QQ：2334512685，我们会及时删除。

发布：秦子恒博客，欢迎转载分享，请保留出处。

layui轮播高度自适应，layui carousel自动调整高度链接：https://www.qinziheng.com/details/7854/

本文关键词：layui教程 layui使用 layui carousel layui轮播 carousel轮播 js轮播 javascript轮播