我想使用bootstrap carousel以不同的屏幕分辨率显示不同数量的项目。
例如：
我希望在屏幕分辨率大于1000px时显示3个联系人的详细信息
我希望在屏幕分辨率介于600px和999px之间时显示2个联系人的详细信息
最后，我想在屏幕分辨率低于600px时显示单个联系人的详细信息
提前感谢您的帮助。我已经被困在这几天了..
答案 0 :(得分：3)
易于实施适用于Bootstrap的解决方案4.将获得来自＆＃34;数据的元素数量 - ＆＃34;来自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>
答案 1 :(得分：1)
这是一个更容易的解决方案。添加一个特殊的CSS类（即：$modal）以与active-next类相同的方式显示项目。当轮播更新活动幻灯片时，将该类添加到下一个项目。然后使用媒体查询仅在较大宽度上应用特殊类。
演示：http://www.codeply.com/go/Q26U8fJDbx
CSS
active的jQuery
@media (min-width: 768px) {
.carousel-item.active-next {
display: flex;
}
}
答案 2 :(得分：0)
首先，我们需要item类来显示轮播中的项目，但是对于这种方法，我们不在DOM中使用item类，而是在窗口加载后基于屏幕创建它解析度。为我完美工作。根据我的要求，我不能少于768像素，因此您可以根据您的要求进行更新。
注意：仅适用于页面加载，不适用于调整窗口大小。
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>
<强>更新
我为每个内部项使用a标记并在JS中使用相同的标记，你可以使用你想要的任何元素（span，div等），但不要忘记在行{{1}中使用相同的元素代替myArray = $('#' + id + ' >.carousel-inner >a');。
答案 3 :(得分：-1)
使用hidden-sm和hidden-md类。