根据元素宽度更改幻灯片数量 [英] Change number of slides depending on element width

问题描述

我正在尝试创建内容轮播.最初可见的幻灯片数量应根据所跟踪的宽度(".container")进行更改

I am trying to create content carousel. Amount of slides visible initially should change depending on traced width (".container")

当前，如果用户刷新页面，则一切正常.我想即时更改幻灯片数量.

Currently everything works if user refreshes the page. I would like to change amount of slides on the fly.

示例: 当用户将平板电脑的位置更改为纵向时，横向平板电脑上的幻灯片会显示4张幻灯片-幻灯片数量应更改为2

Example: on landscape tablet would show 4 slides, when user changes tablet's position to portrait - slide amount should change to 2

如果用户更改浏览器窗口大小，则应进行同样的操作.最初，width可以支持6张幻灯片，调整窗口大小后，它只能支持3张幻灯片.应该通过刷新页面(即时)来进行更改.

Same should happen if user changes browser window size. Initially width could support 6 slides, after window resize it could support just three . Changes should be made with refreshing the page (on the fly).

请参见下面的代码段

$(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();
});

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;
}

<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-->

推荐答案

要将显示调整为新的数字幻灯片，只需将以下行移动到setContainerWidth函数中:

To get the display adjusted to the new number slides, just move the following lines into the setContainerWidth function:

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

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

... and just for clarity, move the definition of slideMargin to the top:

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

因此，代码如下:

$(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();
});

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;
}

<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-->

这篇关于根据元素宽度更改幻灯片数量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！