user7121582 user7121582 - 1 month ago 7
jQuery Question

Change number of slides depending on element width

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.

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

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

Please see snippet below:



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




Answer

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

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

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

So the code will then be as follows:

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