Skrillex

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

分类:

技术点:

相关文章: