css Bootstrap Multi Carousel滑动一项（4列）
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css Bootstrap Multi Carousel滑动一项（4列）相关的知识，希望对你有一定的参考价值。
https://github.com/rtpHarry/Bootstrap3-ShowManySlideOneCarousel/wiki/Change-the-number-of-slides-visible-at-any-one-time
https://codepen.io/rtpHarry/pen/YPBydd
<div class="border_top">
<div class="col-md-2 fav_sidebar">
<ul class="ul_sidebar">
<li><h3>My Profile</h3></li>
<li>Account Settings</li>
<li>My House</li>
<li>Email Settings</li>
</ul>
<ul class="ul_sidebar">
<li><h3>My Kitchens</h3></li>
<li>Saved Kitchen Designs</li>
<li>Create New Kitchen</li>
</ul>
<ul class="ul_sidebar">
<li><h3>My Profile</h3></li>
<li><a href="#">View My Favorites</a></li>
</ul>
</div>
<div class="col-md-10 favorite_border">
<div class='row fav_line'>
<div class='col-md-12'>
<div class="carousel carousel-showmanymoveone slide" id="media">
<div class="row carousel_top">
<div class="col-md-6">
<h3>General Kitchen Style</h3>
</div>
<div class="col-md-6">
<a data-slide="prev" href="#media" class="left carousel-control">‹</a>
<a data-slide="next" href="#media" class="right carousel-control">›</a>
</div>
</div>
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-12 col-sm-6 col-md-3">
<figure>
<img src="http://placehold.it/500/0054A6/fff/&text=1" class="img-responsive">
<figcaption><a href="#"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span></a></figcaption>
</figure>
</div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-6 col-md-3">
<figure>
<img src="http://placehold.it/500/002d5a/fff/&text=2" class="img-responsive">
<figcaption><a href="#"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span></a></figcaption>
</figure>
</div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-6 col-md-3">
<figure>
<img src="http://placehold.it/500/d6d6d6/333&text=3" class="img-responsive">
<figcaption><a href="#"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span></a></figcaption>
</figure>
</div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-6 col-md-3">
<figure>
<img src="http://placehold.it/500/002040/eeeeee&text=4" class="img-responsive">
<figcaption><a href="#"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span></a></figcaption>
</figure>
</div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-6 col-md-3">
<figure>
<img src="http://placehold.it/500/0054A6/fff/&text=5" class="img-responsive">
<figcaption><a href="#"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span></a></figcaption>
</figure>
</div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-6 col-md-3">
<figure>
<img src="http://placehold.it/500/002d5a/fff/&text=6" class="img-responsive">
<figcaption><a href="#"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span></a></figcaption>
</figure>
</div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-6 col-md-3">
<figure>
<img src="http://placehold.it/500/eeeeee&text=7" class="img-responsive">
<figcaption><a href="#"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span></a></figcaption>
</figure>
</div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-6 col-md-3">
<figure>
<img src="http://placehold.it/500/40a1ff/002040&text=8" class="img-responsive">
<figcaption><a href="#"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span></a></figcaption>
</figure>
</div>
</div>
</div>
</div>
</div>
</div>
<div class='row fav_line'>
<div class='col-md-12'>
<div class="carousel carousel-showmanymoveone slide" id="media2">
<div class="row carousel_top">
<div class="col-md-6">
<h3>Cabinets</h3>
</div>
<div class="col-md-6">
<a data-slide="prev" href="#media2" class="left carousel-control">‹</a>
<a data-slide="next" href="#media2" class="right carousel-control">›</a>
</div>
</div>
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-12 col-sm-6 col-md-3">
<figure>
<img src="http://placehold.it/500/0054A6/fff/&text=11" class="img-responsive">
<figcaption><a href="#"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span></a></figcaption>
</figure>
</div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-6 col-md-3">
<figure>
<img src="http://placehold.it/500/002d5a/fff/&text=22" class="img-responsive">
<figcaption><a href="#"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span></a></figcaption>
</figure>
</div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-6 col-md-3">
<figure>
<img src="http://placehold.it/500/d6d6d6/333&text=33" class="img-responsive">
<figcaption><a href="#"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span></a></figcaption>
</figure>
</div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-6 col-md-3">
<figure>
<img src="http://placehold.it/500/002040/eeeeee&text=44" class="img-responsive">
<figcaption><a href="#"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span></a></figcaption>
</figure>
</div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-6 col-md-3">
<figure>
<img src="http://placehold.it/500/0054A6/fff/&text=55" class="img-responsive">
<figcaption><a href="#"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span></a></figcaption>
</figure>
</div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-6 col-md-3">
<figure>
<img src="http://placehold.it/500/002d5a/fff/&text=66" class="img-responsive">
<figcaption><a href="#"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span></a></figcaption>
</figure>
</div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-6 col-md-3">
<figure>
<img src="http://placehold.it/500/eeeeee&text=77" class="img-responsive">
<figcaption><a href="#"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span></a></figcaption>
</figure>
</div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-6 col-md-3">
<figure>
<img src="http://placehold.it/500/40a1ff/002040&text=88" class="img-responsive">
<figcaption><a href="#"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span></a></figcaption>
</figure>
</div>
</div>
</div>
</div>
</div>
</div>
<div class='row fav_line'>
<div class='col-md-12'>
<div class="carousel carousel-showmanymoveone slide" id="media3">
<div class="row carousel_top">
<div class="col-md-6">
<h3>Floors</h3>
</div>
<div class="col-md-6">
<a data-slide="prev" href="#media3" class="left carousel-control">‹</a>
<a data-slide="next" href="#media3" class="right carousel-control">›</a>
</div>
</div>
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-12 col-sm-6 col-md-3">
<figure>
<img src="http://placehold.it/500/0054A6/fff/&text=111" class="img-responsive">
<figcaption><a href="#"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span></a></figcaption>
</figure>
</div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-6 col-md-3">
<figure>
<img src="http://placehold.it/500/002d5a/fff/&text=222" class="img-responsive">
<figcaption><a href="#"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span></a></figcaption>
</figure>
</div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-6 col-md-3">
<figure>
<img src="http://placehold.it/500/d6d6d6/333&text=333" class="img-responsive">
<figcaption><a href="#"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span></a></figcaption>
</figure>
</div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-6 col-md-3">
<figure>
<img src="http://placehold.it/500/002040/eeeeee&text=444" class="img-responsive">
<figcaption><a href="#"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span></a></figcaption>
</figure>
</div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-6 col-md-3">
<figure>
<img src="http://placehold.it/500/0054A6/fff/&text=555" class="img-responsive">
<figcaption><a href="#"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span></a></figcaption>
</figure>
</div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-6 col-md-3">
<figure>
<img src="http://placehold.it/500/002d5a/fff/&text=666" class="img-responsive">
<figcaption><a href="#"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span></a></figcaption>
</figure>
</div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-6 col-md-3">
<figure>
<img src="http://placehold.it/500/eeeeee&text=777" class="img-responsive">
<figcaption><a href="#"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span></a></figcaption>
</figure>
</div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-6 col-md-3">
<figure>
<img src="http://placehold.it/500/40a1ff/002040&text=888" class="img-responsive">
<figcaption><a href="#"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span></a></figcaption>
</figure>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
$(document).ready(function() {
$('#media, #media2, #media3').carousel({
pause: true,
interval: 100000
});
$('.carousel .item').each(function () {
var itemToClone = $(this);
for (var i=1;i<4;i++) {
itemToClone = itemToClone.next();
// wrap around if at end of item collection
if (!itemToClone.length) {
itemToClone = $(this).siblings(':first');
}
// grab item, clone, add marker class, add to collection
itemToClone.children(':first-child').clone()
.addClass("cloneditem-"+(i))
.appendTo($(this));
}
});
});
/* HOVER - favorites */
figure {
position: relative;
display: inline-block;
}
figcaption {
display: none;
position: absolute;
/* left: 0; */
top: 10px;
bottom: 5px;
right: 10px;
/* background-color: rgba(0,0,0,.15); */
}
figure:hover img {
opacity: .7;
}
figure:hover figcaption {
display: block;
}
/* CAROUSEL */
.carousel-showmanymoveone .cloneditem-1,
.carousel-showmanymoveone .cloneditem-2,
.carousel-showmanymoveone .cloneditem-3 {
display: none;
}
@media all and (min-width: 768px) {
.carousel-showmanymoveone .carousel-inner > .active.left,
.carousel-showmanymoveone .carousel-inner > .prev {
left: -50%;
}
.carousel-showmanymoveone .carousel-inner > .active.right,
.carousel-showmanymoveone .carousel-inner > .next {
left: 50%;
}
.carousel-showmanymoveone .carousel-inner > .left,
.carousel-showmanymoveone .carousel-inner > .prev.right,
.carousel-showmanymoveone .carousel-inner > .active {
left: 0;
}
.carousel-showmanymoveone .carousel-inner .cloneditem-1 {
display: block;
}
}
@media all and (min-width: 768px) and (transform-3d), all and (min-width: 768px) and (-webkit-transform-3d) {
.carousel-showmanymoveone .carousel-inner > .item.active.right,
.carousel-showmanymoveone .carousel-inner > .item.next {
-webkit-transform: translate3d(50%, 0, 0);
transform: translate3d(50%, 0, 0);
left: 0;
}
.carousel-showmanymoveone .carousel-inner > .item.active.left,
.carousel-showmanymoveone .carousel-inner > .item.prev {
-webkit-transform: translate3d(-50%, 0, 0);
transform: translate3d(-50%, 0, 0);
left: 0;
}
.carousel-showmanymoveone .carousel-inner > .item.left,
.carousel-showmanymoveone .carousel-inner > .item.prev.right,
.carousel-showmanymoveone .carousel-inner > .item.active {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
left: 0;
}
}
@media all and (min-width: 992px) {
.carousel-showmanymoveone .carousel-inner > .active.left,
.carousel-showmanymoveone .carousel-inner > .prev {
left: -25%;
}
.carousel-showmanymoveone .carousel-inner > .active.right,
.carousel-showmanymoveone .carousel-inner > .next {
left: 25%;
}
.carousel-showmanymoveone .carousel-inner > .left,
.carousel-showmanymoveone .carousel-inner > .prev.right,
.carousel-showmanymoveone .carousel-inner > .active {
left: 0;
}
.carousel-showmanymoveone .carousel-inner .cloneditem-2,
.carousel-showmanymoveone .carousel-inner .cloneditem-3 {
display: block;
}
}
@media all and (min-width: 992px) and (transform-3d), all and (min-width: 992px) and (-webkit-transform-3d) {
.carousel-showmanymoveone .carousel-inner > .item.active.right,
.carousel-showmanymoveone .carousel-inner > .item.next {
-webkit-transform: translate3d(25%, 0, 0);
transform: translate3d(25%, 0, 0);
left: 0;
}
.carousel-showmanymoveone .carousel-inner > .item.active.left,
.carousel-showmanymoveone .carousel-inner > .item.prev {
-webkit-transform: translate3d(-25%, 0, 0);
transform: translate3d(-25%, 0, 0);
left: 0;
}
.carousel-showmanymoveone .carousel-inner > .item.left,
.carousel-showmanymoveone .carousel-inner > .item.prev.right,
.carousel-showmanymoveone .carousel-inner > .item.active {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
left: 0;
}
}以上是关于css Bootstrap Multi Carousel滑动一项（4列）的主要内容，如果未能解决你的问题，请参考以下文章
静态 Html 网站 - Bootstrap - 多语言支持
Bootstrap - 等待视频完成，然后再滑动到下一个轮播