Twitter bootstrap 旋转木马,里面有一个大项目和 5 个小缩略图
Twitter bootstrap carousel with one big item and 5 small thumbnails inside it
所以基本上我需要实现的是:
一个 bootstrap 显示 1 个项目的画廊,也滚动 1 个项目,但同时我们可以看到下一张图片或这张大图片下的上一张。我们看到 6 个小尺寸缩略图 与大图像一起滑动。箭头应该放在所有东西的中间,而不仅仅是大图的中间。
我从默认的 bootstrap 轮播代码开始,但此时堆积如山。有什么解决办法吗?
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" 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="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
您可以使用 bootstrap 指南,其中介绍了如何制作滑块,该指南附带一个小项目符号菜单,您可以将其更改为图像,而不是项目符号.
先尝试一下自己,然后粘贴您的实际尝试。
在这件事上花了几个小时后,我设法实现了 this,我很高兴。
这是我的html代码:
<div style="width: 400px; margin: 0px auto;">
<div id="myCarouselBig" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-12"><a href="#"><img src="http://placehold.it/500/bbbbbb/fff&text=1" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-12"><a href="#"><img src="http://placehold.it/500/CCCCCC&text=2" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-12"><a href="#"><img src="http://placehold.it/500/eeeeee&text=3" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-12"><a href="#"><img src="http://placehold.it/500/f4f4f4&text=4" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-12"><a href="#"><img src="http://placehold.it/500/fcfcfc/333&text=5" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-12"><a href="#"><img src="http://placehold.it/500/f477f4/fff&text=6" class="img-responsive"></a></div>
</div>
</div>
<a class="left carousel-control" href="#myCarouselBig" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarouselBig" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-3" style="width: 20%;"><a href="#"><img src="http://placehold.it/500/bbbbbb/fff&text=1" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-3" style="width: 20%;"><a href="#"><img src="http://placehold.it/500/CCCCCC&text=2" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-3" style="width: 20%;"><a href="#"><img src="http://placehold.it/500/eeeeee&text=3" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-3" style="width: 20%;"><a href="#"><img src="http://placehold.it/500/f4f4f4&text=4" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-3" style="width: 20%;"><a href="#"><img src="http://placehold.it/500/fcfcfc/333&text=5" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-3" style="width: 20%;"><a href="#"><img src="http://placehold.it/500/f477f4/fff&text=6" class="img-responsive"></a></div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev" style="display: none;">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next" style="display: none;">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
javascript代码:
$('#myCarousel').carousel({
interval: 10000
})
$('#myCarousel.carousel .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<3; i++) {
next=next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});
$('#myCarouselBig').on('slide.bs.carousel', function (event) {
if (event.direction == 'left') $('#myCarousel').carousel('next');
else {
$('#myCarousel').carousel('prev');
$('#myCarousel').carousel('pause');
}
})
和css代码:
#myCarousel .carousel-inner > .next.left, #myCarousel .carousel-inner > .prev.right {
left: 0 !important;
}
#myCarousel .carousel-inner .active.left { left: -20%; }
#myCarousel .carousel-inner .active.right { left: 20%; }
#myCarousel .carousel-inner .next { left: 20% }
#myCarousel .carousel-inner .prev { left: -20% }
#myCarousel .carousel-control.left { background-image: none; }
#myCarousel .carousel-control.right { background-image: none; }
#myCarousel .carousel-inner .item { background: white; }
这里是 jsfiddle code.
注意:该代码段包含 2 个 bootstrap 轮播,一个带有大图像,另一个带有 5 个小缩略图。 2 个轮播链接在一起,这意味着每次您触发主轮播时,另一个轮播将向左或向右滑动。如您所知,bootstrap 不支持 5 列,但我做了一个 hack,为每张图片添加了 20% 的宽度,即使我首先在其上使用了 col-xs-3 class。在 css 你可以找到一个 left: 0 !important 条件。这是一个 hack 我花了将近 3 个小时后发现,没有它缩略图轮播效果会崩溃。另一个您不必错过的 hack 是像我在 css 中那样为项目添加背景颜色,因为在某些情况下图像可能看起来很奇怪,如果您的项目包含文本,那么文本可能看起来很粗。目前,如果您按下小图像,则不会发生任何事情,但我计划在接下来的几天内开发它,我可能也会用它来更新此代码。
所以基本上我需要实现的是:
一个 bootstrap 显示 1 个项目的画廊,也滚动 1 个项目,但同时我们可以看到下一张图片或这张大图片下的上一张。我们看到 6 个小尺寸缩略图 与大图像一起滑动。箭头应该放在所有东西的中间,而不仅仅是大图的中间。
我从默认的 bootstrap 轮播代码开始,但此时堆积如山。有什么解决办法吗?
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" 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="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
您可以使用 bootstrap 指南,其中介绍了如何制作滑块,该指南附带一个小项目符号菜单,您可以将其更改为图像,而不是项目符号.
先尝试一下自己,然后粘贴您的实际尝试。
在这件事上花了几个小时后,我设法实现了 this,我很高兴。
这是我的html代码:
<div style="width: 400px; margin: 0px auto;">
<div id="myCarouselBig" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-12"><a href="#"><img src="http://placehold.it/500/bbbbbb/fff&text=1" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-12"><a href="#"><img src="http://placehold.it/500/CCCCCC&text=2" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-12"><a href="#"><img src="http://placehold.it/500/eeeeee&text=3" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-12"><a href="#"><img src="http://placehold.it/500/f4f4f4&text=4" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-12"><a href="#"><img src="http://placehold.it/500/fcfcfc/333&text=5" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-12"><a href="#"><img src="http://placehold.it/500/f477f4/fff&text=6" class="img-responsive"></a></div>
</div>
</div>
<a class="left carousel-control" href="#myCarouselBig" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarouselBig" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-3" style="width: 20%;"><a href="#"><img src="http://placehold.it/500/bbbbbb/fff&text=1" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-3" style="width: 20%;"><a href="#"><img src="http://placehold.it/500/CCCCCC&text=2" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-3" style="width: 20%;"><a href="#"><img src="http://placehold.it/500/eeeeee&text=3" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-3" style="width: 20%;"><a href="#"><img src="http://placehold.it/500/f4f4f4&text=4" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-3" style="width: 20%;"><a href="#"><img src="http://placehold.it/500/fcfcfc/333&text=5" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-3" style="width: 20%;"><a href="#"><img src="http://placehold.it/500/f477f4/fff&text=6" class="img-responsive"></a></div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev" style="display: none;">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next" style="display: none;">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
javascript代码:
$('#myCarousel').carousel({
interval: 10000
})
$('#myCarousel.carousel .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<3; i++) {
next=next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});
$('#myCarouselBig').on('slide.bs.carousel', function (event) {
if (event.direction == 'left') $('#myCarousel').carousel('next');
else {
$('#myCarousel').carousel('prev');
$('#myCarousel').carousel('pause');
}
})
和css代码:
#myCarousel .carousel-inner > .next.left, #myCarousel .carousel-inner > .prev.right {
left: 0 !important;
}
#myCarousel .carousel-inner .active.left { left: -20%; }
#myCarousel .carousel-inner .active.right { left: 20%; }
#myCarousel .carousel-inner .next { left: 20% }
#myCarousel .carousel-inner .prev { left: -20% }
#myCarousel .carousel-control.left { background-image: none; }
#myCarousel .carousel-control.right { background-image: none; }
#myCarousel .carousel-inner .item { background: white; }
这里是 jsfiddle code.
注意:该代码段包含 2 个 bootstrap 轮播,一个带有大图像,另一个带有 5 个小缩略图。 2 个轮播链接在一起,这意味着每次您触发主轮播时,另一个轮播将向左或向右滑动。如您所知,bootstrap 不支持 5 列,但我做了一个 hack,为每张图片添加了 20% 的宽度,即使我首先在其上使用了 col-xs-3 class。在 css 你可以找到一个 left: 0 !important 条件。这是一个 hack 我花了将近 3 个小时后发现,没有它缩略图轮播效果会崩溃。另一个您不必错过的 hack 是像我在 css 中那样为项目添加背景颜色,因为在某些情况下图像可能看起来很奇怪,如果您的项目包含文本,那么文本可能看起来很粗。目前,如果您按下小图像,则不会发生任何事情,但我计划在接下来的几天内开发它,我可能也会用它来更新此代码。