时间戳

首页 > 解决方案 > 我的多项目轮播在调整屏幕大小时折叠（引导）

javascript - 我的多项目轮播在调整屏幕大小时折叠（引导）

问题描述

尝试调整输出画面，轮播会塌陷，最后几项会掉下来然后消失。我需要的是轮播在调整大小时不要折叠。

请帮我！

我的代码笔

ResCarouselSize();

$(window).resize(function () {
  ResCarouselSize();
});

//this function define the size of the items
function ResCarouselSize() {
  var incno = 0;
  var dataItems = ("data-items");
  var itemClass = ('.item');
  var id = 0;
  var btnParentSb = '';
  var itemsSplit = '';
  var sampwidth = $(itemsMainDiv).width();
  var bodyWidth = $('body').width();
  $(itemsDiv).each(function () {
    id = id + 1;
    var itemNumbers = $(this).find(itemClass).length;
    btnParentSb = $(this).parent().attr(dataItems);
    itemsSplit = btnParentSb.split(',');
    $(this).parent().attr("id", "MultiCarousel" + id);

    if (bodyWidth >= 1200) {
      incno = itemsSplit[3];
      itemWidth = sampwidth / incno;
    }
    else if (bodyWidth >= 992) {
      incno = itemsSplit[2];
      itemWidth = sampwidth / incno;
    }
    else if (bodyWidth >= 768) {
      incno = itemsSplit[1];
      itemWidth = sampwidth / incno;
    }
    else {
      incno = itemsSplit[0];
      itemWidth = sampwidth / incno;
    }
    $(this).css({ 'transform': 'translateX(0px)', 'width': itemWidth * itemNumbers });
    $(this).find(itemClass).each(function () {
      $(this).outerWidth(itemWidth);
    });

    $(".leftLst").addClass("over");
    $(".rightLst").removeClass("over");

  });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

标签： javascriptjqueryhtmlcss

解决方案

.MultiCarousel{ Height: 185px;}这将解决您的问题

推荐阅读