Bootstrap Carousel - Number of Items to Display on Different Resoultions

Question

I want to use the bootstrap carousel to display a different number of items at different screen resolutions.

For example:

1. I want to show details for a 3 contacts when the screen resolution is greater than 1000px

2. I want to show details for a 2 contacts when the screen resolution is between 600px and 999px

3. Finally I want to show details for a single contact when the screen resolution is less than 600px

Thanks for any help in advance. I have been stuck on this for a few days now..

Solution 1

Easy to implement solution adapted to Bootstrap 4. Will get count of elements from "data-" and breakpoints from JS.

(function ($) {
	function calcStepSize(optionNode) {
		var breakM = 990; 
		var breakS = 768; 
		
		var width = $(window).innerWidth();
		
		if(width < breakS) {
			var key = 's';
		} else if(width < breakM) {
			key = 'm';
		} else {
			key = 'l';
		}
		
		var cnt = 1*optionNode.data("itemcount-"+key);
		
		return cnt > 0? cnt : 1;
	}

	function repartition(container, items, count) {
		container.children().remove();
		
		for(var i = 0; i < items.length; i++) {
			var cBlock = $('<div class="carousel-item" ></div').appendTo(container);
			var cInnerBlock = $('<div class="row"></div>').appendTo(cBlock);
                
			for(var j = 0; j < count; j++) {
				var cIdx = (i + j) % items.length;
				
				cInnerBlock.append($(items.get(cIdx)).clone());
			}
		}
		
		container.children().first().addClass("active");
	}
	
	$('.carousel.multi').each(function(idx, El) {
		var carousel = $(El);
		var container = carousel.find('.carousel-inner');
		
		if(!container.children().first().hasClass('carousel-item')) {
			var items = container.children().clone();

			var lastSize = calcStepSize(carousel);
			repartition(container, items, lastSize);

			$(window).resize(function () {
				var cSize = calcStepSize(carousel);

				if(cSize != lastSize) {
					repartition(container, items, cSize);
					lastSize = cSize;
				}
			}); 
		} else {
			container.children().first().addClass("active");
		}
		
		carousel.carousel({
			interval: false
		});
	});

}(jQuery));

<link href="https://v4-alpha.getbootstrap.com/assets/css/docs.min.css" rel="stylesheet"/>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<script src="https://cdn.rawgit.com/imsky/holder/master/holder.js"></script>

<div class="container">

<div class="bd-example">

<div id="carousel-example-generic" class="carousel multi slide" data-ride="carousel" data-itemcount-l="4" data-itemcount-m="3" data-itemcount-s="2" autostart="0">
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner" role="listbox">
  
    <div class="col-xs-6 col-sm-6 col-md-4 col-lg-3">
      <img src="holder.js/250x250/auto/#ccc:#755" class="img-fluid" alt="First slide">
    </div>
    <div class="col-xs-6 col-sm-6 col-md-4 col-lg-3">
      <img src="holder.js/250x250/auto/#7dd:#7dd" class="img-fluid" alt="Second slide">
    </div>
    <div class="col-xs-6 col-sm-6 col-md-4 col-lg-3">
      <img src="holder.js/250x250/auto/#747:#444" class="img-fluid" alt="Third slide">
    </div>
        <div class="col-xs-6 col-sm-6 col-md-4 col-lg-3">
      <img src="holder.js/250x250/auto/#ccc:#755" class="img-fluid" alt="First slide">
    </div>
    <div class="col-xs-6 col-sm-6 col-md-4 col-lg-3">
      <img src="holder.js/250x250/auto/#7dd:#7dd" class="img-fluid" alt="Second slide">
    </div>
    <div class="col-xs-6 col-sm-6 col-md-4 col-lg-3">
      <img src="holder.js/250x250/auto/#747:#444" class="img-fluid" alt="Third slide">
    </div>
 
  </div>
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="icon-prev" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="icon-next" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
</div>

Solution 2

Here's an easier solution. Add a special CSS class (ie:active-next) to show the items the same way the active class does. When the carousel updates the active slide, add the class to the next item(s). Then apply the special class only on larger widths using a media query.

Demo: http://www.codeply.com/go/Q26U8fJDbx

CSS

@media (min-width: 768px) {
    .carousel-item.active-next {
        display: flex;
    }
}

jQuery

$('#mySlider').on('slide.bs.carousel', function (e) {
  var $e = $(e.relatedTarget);
  $e.removeClass('active-next');

  var $next = $e.next();
  if ($next.length===0){
      $next = $('.carousel-item').eq(0);
  }
  var $nextnext = $e.next().next();
  if ($nextnext.length===0){
      $nextnext = $('.carousel-item').eq(1);
  }
  $next.addClass('active-next');
  $nextnext.addClass('active-next');
});

Demo Bootstrap 4

Comments

[Yagnesh Agola]

This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post - you can always comment on your own posts, and once you have sufficient reputation you will be able to comment on any post.

[Voreny]

That's the point, I need to have 50 reputation to add a comment. This is why to provide any information I need to add an answer and wait for it to get upvoted, which is really inconvenient.