关于Layui 响应式移动端轮播图的问题


用layui做轮播图,在手机上宽度异常, 可通过以下方法解决, 不喜欢layui的同学可以选择Swiper

  // 轮播图
  layui.use('carousel', function () {
    var carousel = layui.carousel;
    carousel.render({
      elem: '#banner',
      width: '100%', //设置容器宽度
      height: '100%',
      arrow: 'always', //始终显示箭头
      indicator: 'none',
      //,anim: 'updown' //切换动画方式
    });
  });

  // 响应式轮播图
  window.onload = function () {
    var bannerH = $('#banner img')[0].height;
    $('.layui-carousel').css('height',bannerH+'px');
  }

根据自己元素的id做对应的修改


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM