问题
I want to use the bootstrap carousel to display a different number of items at different screen resolutions.
For example:
I want to show details for a 3 contacts when the screen resolution is greater than 1000px
I want to show details for a 2 contacts when the screen resolution is between 600px and 999px
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..
回答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>回答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
回答3:
First of all , we need item class to display items in carousel , but for this approach we don't use item class in DOM, instead we create it, after window load, based screen resolution. Working perfectly for me.I can't go less that 768 px as per my requirement , so you can update as per your requirement.
NOTE : Works only on page load , Not on window resize.
JS
var itemscounttovisible = 1;
var w = window.innerWidth;
console.log(w) ;
if (w > 768 && w <= 980)
itemscounttovisible = 4;
if (w > 980)
itemscounttovisible = 5;
if (w == 768)
itemscounttovisible = 3;
if (w < 768)
itemscounttovisible = 2;
$('.carousel ').each(function (index, Obj) {
id = $(Obj).attr('id')
myArray = $('#' + id + ' >.carousel-inner >a');
for (var q = 0; q < myArray.length;) {
var ElementsToBeWrapeed = myArray.slice(q, q + itemscounttovisible);
if (q == 0)
// first slide must be active
$(ElementsToBeWrapeed).wrapAll("<div class='item active'></div>");
else
$(ElementsToBeWrapeed).wrapAll("<div class='item '></div>");
q = q + itemscounttovisible;
}
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div id="MenuID" class="carousel slide carousel-fade " data-ride="carousel" data-type="multi" data-interval="0">
<div class="carousel-inner">
<a href="#">contact 1</a>
<a href="#">contact 2</a>
<a href="#">contact 3</a>
<a href="#">contact 4</a>
<a href="#">contact 5</a>
</div>
<a data-slide="prev" role="button" href="#MenuID" class="left carousel-control"><span class=" fa fa-angle-left"></span></a>
<a data-slide="next" role="button" href="#MenuID" class="right carousel-control"><span class="fa fa-angle-right"></span></a>
</div>Update:
I used a tag for each inner item and used the same in JS, you can use whatever element (span, div, etc) you want but don't forget use the same in line myArray = $('#' + id + ' >.carousel-inner >a'); in place of a.
回答4:
Use hidden-sm and hidden-md classes.
来源：https://stackoverflow.com/questions/32372294/bootstrap-carousel-number-of-items-to-display-on-different-resoultions