根据元素宽度更改幻灯片数量

Question

我正在尝试创建内容轮播。最初可见的幻灯片数量应根据跟踪的宽度而变化（＆＃34; .container＆＃34;）

目前，如果用户刷新页面，一切正常。我想在飞行中改变幻灯片的数量。

实施例： 在平板电脑上会显示4张幻灯片，当用户将平板电脑的位置更改为肖像时 - 幻灯片数量应更改为2

如果用户更改浏览器窗口大小，也会发生相同情况。最初宽度可以支持6个幻灯片，在窗口调整大小后它可以只支持3个。应该通过刷新页面（动态）进行更改。

请参阅下面的代码段：

＆＃13;

＆＃13;

$(document).ready(function() {
  function Carousel() {

    var body_size, resizeTimer, slidesInView;

    function setContainerWidth() {
      body_size = $('.container').width();
      slidesInView = body_size <= 640 ? 1 //Less than or equal to 980
        :
        body_size <= 980 ? 2 //Less than or equal 640
        :
        6;

    }
    $(window).resize(function() {
      clearTimeout(resizeTimer);
      resizeTimer = setTimeout(setContainerWidth, 200);
    });
    setContainerWidth();

    console.log(body_size);
    console.log(slidesInView);

    var slideMargin = 30; // margin between sides. sum of both sides.
    var SlideBlockWidth = ($(".carousel-list li").outerWidth() + slideMargin) * slidesInView;

    // Set Width for slides direct wrapper.
    $(".inner-carousel").css("width", SlideBlockWidth);

    //Move he last list item before the first item.
    $('.carousel-list li:first').before($('.carousel-list li:last'));

    $('.next').click(function() {

      // Get the width of the items (width + margin)
      var item_width = $('.carousel-list li').outerWidth() + slideMargin;

      // Calculate the new left indent of the unordered list
      var left_indent = parseInt($('.carousel-list').css('left')) - item_width;

      //make the sliding effect using jquery's animate function
      $('.carousel-list:not(:animated)').animate({
        'left': left_indent
      }, 500, function() {

        //Make infinite carousel
        $('.carousel-list li:last').after($('.carousel-list li:first'));

        //and get the left indent to the default -235px
        $('.carousel-list').css({
          'left': '-235px'
        });
      });
    });

    $('.prev').click(function() {

      var item_width = $('.carousel-list li').outerWidth() + slideMargin;

      var left_indent = parseInt($('.carousel-list').css('left')) + item_width;

      $('.carousel-list:not(:animated)').animate({
        'left': left_indent
      }, 500, function() {

        /* when sliding to left we are moving the last item before the first list item */
        $('.carousel-list li:first').before($('.carousel-list li:last'));

        /* and again, when we make that change we are setting the left indent of our unordered list to the default -210px */
        $('.carousel-list').css({
          'left': '-235px'
        });
      });

    });
  } //carousel
  Carousel();
});

＆＃13;

html {
  background: #1b1b1b;
}

.button-container {
  display: block;
}
.button {
  width: 200px;
  height: 50px;
  line-height: 50px;
  background: #ddd;
  text-align: Center;
  font-size: 2rem;
  cursor: pointer;
  display: inline-block;
  margin-top: 20px;
}
.carousel-wrap {
  position: relative;
  border: 1px solid #ddd;
  text-align: center;
}
.inner-carousel {
  width: 1410px;/* important (this width = width of list item(including margin) * items shown */
  overflow: hidden;/* important (hide the items outside the div) */
  display: inline-block;
  background: #F0F0F0;
  text-align: left;
}
.inner-carousel::after {
  content: '';
  display: block;
  clear: both;
}
.carousel-list {
  position: relative;
  left: -235px;
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  width: 9999px;
  font-size: 0;
}
.carousel-list li {
  display: inline-block;
  width: 205px;
  height: 200px;
  background: #000000;
  color: #fff;
  font-size: 5rem;
  text-align: center;
  box-sizing: border-box;
  border-right: 1px solid #eee;
  border-left: 1px solid #eee;
  line-height: 200px;
  margin: 0 15px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="container">

  <section class="carousel-wrap">
    <div class="inner-carousel">
      <ul class="carousel-list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
      </ul>

    </div>
    <!--/inner-carousel-->
    <div class="button-container">
      <div class="prev button">&#x25c4;</div>
      <div class="next button">&#x25ba;</div>
    </div>
  </section>
  <!--/carousel-wrap-->

</div>
<!--/container-->

＆＃13;

＆＃13;

＆＃13;

Answer 1

要将显示调整为新数字幻灯片，只需将以下行移至setContainerWidth功能：

var slideBlockWidth = ($(".carousel-list li").outerWidth() + slideMargin) * slidesInView;
// Set Width for slides direct wrapper.
$(".inner-carousel").css("width", slideBlockWidth);

...为了清楚起见，将slideMargin的定义移到顶部：

var slideMargin = 30; // margin between sides. sum of both sides.

所以代码如下：

＆＃13;

＆＃13;

$(document).ready(function() {
  function Carousel() {
    var body_size, resizeTimer, slidesInView,
        slideMargin = 30; // margin between sides. sum of both sides.

    function setContainerWidth() {
      body_size = $('.container').width();
      slidesInView = body_size <= 640 ? 1 //Less than or equal to 980
        :
        body_size <= 980 ? 2 //Less than or equal 640
        :
        6;
      var slideBlockWidth = ($(".carousel-list li").outerWidth() + slideMargin) * slidesInView;
      // Set Width for slides direct wrapper.
      $(".inner-carousel").css("width", slideBlockWidth);
    }
    $(window).resize(function() {
      clearTimeout(resizeTimer);
      resizeTimer = setTimeout(setContainerWidth, 200);
    });
    setContainerWidth();

    //Move he last list item before the first item.
    $('.carousel-list li:first').before($('.carousel-list li:last'));

    //console.log(body_size);
    //console.log(slidesInView);

    $('.next').click(function() {
      // Get the width of the items (width + margin)
      var item_width = $('.carousel-list li').outerWidth() + slideMargin;
      // Calculate the new left indent of the unordered list
      var left_indent = parseInt($('.carousel-list').css('left')) - item_width;
      //make the sliding effect using jquery's animate function
      $('.carousel-list:not(:animated)').animate({
        'left': left_indent
      }, 500, function() {
        //Make infinite carousel
        $('.carousel-list li:last').after($('.carousel-list li:first'));
        //and get the left indent to the default -235px
        $('.carousel-list').css({
          'left': '-235px'
        });
      });
    });

    $('.prev').click(function() {
      var item_width = $('.carousel-list li').outerWidth() + slideMargin;
      var left_indent = parseInt($('.carousel-list').css('left')) + item_width;
      $('.carousel-list:not(:animated)').animate({
        'left': left_indent
      }, 500, function() {
        /* when sliding to left we are moving the last item before the first list item */
        $('.carousel-list li:first').before($('.carousel-list li:last'));
        /* and again, when we make that change we are setting the left indent of our unordered list to the default -210px */
        $('.carousel-list').css({
          'left': '-235px'
        });
      });
    });
  } //carousel
  Carousel();
});

＆＃13;

html {
  background: #1b1b1b;
}

.button-container {
  display: block;
}
.button {
  width: 200px;
  height: 50px;
  line-height: 50px;
  background: #ddd;
  text-align: Center;
  font-size: 2rem;
  cursor: pointer;
  display: inline-block;
  margin-top: 20px;
}
.carousel-wrap {
  position: relative;
  border: 1px solid #ddd;
  text-align: center;
}
.inner-carousel {
  width: 1410px;/* important (this width = width of list item(including margin) * items shown */
  overflow: hidden;/* important (hide the items outside the div) */
  display: inline-block;
  background: #F0F0F0;
  text-align: left;
}
.inner-carousel::after {
  content: '';
  display: block;
  clear: both;
}
.carousel-list {
  position: relative;
  left: -235px;
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  width: 9999px;
  font-size: 0;
}
.carousel-list li {
  display: inline-block;
  width: 205px;
  height: 200px;
  background: #000000;
  color: #fff;
  font-size: 5rem;
  text-align: center;
  box-sizing: border-box;
  border-right: 1px solid #eee;
  border-left: 1px solid #eee;
  line-height: 200px;
  margin: 0 15px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <section class="carousel-wrap">
    <div class="inner-carousel">
      <ul class="carousel-list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
      </ul>
    </div>
    <!--/inner-carousel-->
    <div class="button-container">
      <div class="prev button">&#x25c4;</div>
      <div class="next button">&#x25ba;</div>
    </div>
  </section>
  <!--/carousel-wrap-->
</div>
<!--/container-->

＆＃13;

＆＃13;

＆＃13;