[英]Bootstrap Multi Item Carousel not responsive
我有一个多项目轮播,它在更宽的屏幕上显示 6 个项目,但在较小的屏幕上继续显示 6 个项目。 它只是将它们堆叠在一起并与其他内容重叠。 我想在小屏幕上显示 4 个项目,然后在超小屏幕上显示 2 个项目。 我已经修改了这个 codepen 的代码: https ://codepen.io/MhSami/pen/zNBMbj ,我发现这个响应速度更快的 codepen ( https://codepen.io/Qvatra/pen/yOvBoM ) 有 4 个项目,但是,当我尝试将代码更改为它时,它根本不显示。
这是轮播的 html
<div class="container" style="background-color:white; height:140px; padding-top:15px">
<div class="row">
<div class="col-xs-11 col-md-12 col-centered">
<div class="carousel slide" data-ride="carousel" data-type="multi" data-interval="3500" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-md-2 col-sm-3 col-xs-6">
<div>
<a href="{% url 'category-2' category2='arsenal' %}">
<img src="{% static 'logo/arsenal_city_logo.png' %}" class="img-responsive" style="max-width:100px; max-height:110px">
</a>
</div>
</div>
</div>
<div class="item">
<div class="col-md-2 col-sm-3 col-xs-6">
<a href="{% url 'category-2' category2='man_united' %}">
<img src="{% static 'logo/manchester_united_fc_logo.png' %}" class="img-responsive" style="max-width:100px; max-height:110px">
</a>
</div>
</div>
<div class="item">
<div class="col-md-2 col-sm-3 col-xs-6">
<a href="{% url 'category-2' category2='fcb' %}">
<img src="{% static 'logo/barcelona_logo.png' %}" class="img-responsive" style="max-width:100px; max-height:110px">
</a>
</div>
</div>
<div class="item">
<div class="col-md-2 col-sm-3 col-xs-6">
<a href="{% url 'category-2' category2='chelsea' %}">
<img src="{% static 'logo/chelsea_logo.png' %}" class="img-responsive" style="max-width:100px; max-height:110px">
</a>
</div>
</div>
<div class="item">
<div class="col-md-2 col-sm-3 col-xs-6">
<a href="{% url 'category-2' category2='everton' %}">
<img src="{% static 'logo/everton_fc_logo.png' %}" class="img-responsive" style="max-width:100px; max-height:110px">
</a>
</div>
</div>
<div class="item">
<div class="col-md-2 col-sm-3 col-xs-6">
<a href="{% url 'category-2' category2='liverpool' %}">
<img src="{% static 'logo/liverpool_fc_logo.png' %}" class="img-responsive" style="max-width:100px; max-height:110px">
</a>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</div>
</div>
CSS:
.carousel-inner { margin: auto; width: 90%; }
.carousel-control { width: 4%; }
.carousel-control.left,
.carousel-control.right {
background-image:none;
}
.glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right {
margin-top:-10px;
margin-left: -10px;
color: #444;
}
.carousel-inner {
a {
display:table-cell;
height: 180px;
width: 200px;
vertical-align: middle;
}
img {
max-height: 150px;
margin: auto auto;
max-width: 100%;
}
}
@media (min-width: 992px ) {
.carousel-inner > .item.next,
.carousel-inner > .item.active.right {
left: 0;
-webkit-transform: translate3d(16.7%, 0, 0);
transform: translate3d(16.7%, 0, 0);
}
.carousel-inner > .item.prev,
.carousel-inner > .item.active.left {
left: 0;
-webkit-transform: translate3d(-16.7%, 0, 0);
transform: translate3d(-16.7%, 0, 0);
}
}
@media (max-width: 992px ) {
.carousel-inner > .item.next,
.carousel-inner > .item.active.right {
left: 0;
-webkit-transform: translate3d(25%, 0, 0);
transform: translate3d(25%, 0, 0);
}
.carousel-inner > .item.prev,
.carousel-inner > .item.active.left {
left: 0;
-webkit-transform: translate3d(-25%, 0, 0);
transform: translate3d(-25%, 0, 0);
}
}
JS:
$('.carousel[data-type="multi"] .item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (var i=0;i<2;i++) {
next=next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});
我试过的:
事实证明我以错误的顺序导入脚本,这就是响应式代码笔在我的环境中不起作用的原因
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.