关于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做对应的修改

转载于:https://www.cnblogs.com/Skrillex/p/10697428.html