Twitter Bootstrap - 多图像(缩略图)轮播 - 一次移动一个缩略图 [英] Twitter Bootstrap - multiple image (thumbnail) carousel - move thumbnails one at a time
问题描述
我正在尝试的Twitter bootstrap 3.我很新的HTML,CSS和Javascript。我有一个旋转木马我创建,它的代码看起来像这样:
I am trying out Twitter bootstrap 3. I am quite new to HTML, CSS and Javascript. I have a carousel which i created and it's code looks like so:
<div class="container">
<div id="myCarousel2" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active">
<div class="row text-center">
<!-- ITEM-->
<div class="col-md-3">
<div class="thumbnail product-item"> <a class="img-responsive" href="/current-buzz"><img src="{% static 'img/buzzbutton.jpg' %}"/></a>
</div>
</div>
<!-- ITEM-->
<!-- ITEM-->
<div class="col-md-3">
<div class="thumbnail product-item"> <a class="img-responsive" href="/current-buzz"><img src="{% static 'img/recipebutton.jpg' %}"/></a>
</div>
</div>
<!-- ITEM-->
<!-- ITEM-->
<div class="col-md-3">
<div class="thumbnail product-item"> <a class="img-responsive" href="/current-buzz"><img src="{% static 'img/buzzbutton.jpg' %}"/></a>
</div>
</div>
<!-- ITEM-->
<!-- ITEM-->
<div class="col-md-3">
<div class="thumbnail product-item"> <a class="img-responsive" href="/current-buzz"><img src="{% static 'img/recipebutton.jpg' %}"/></a>
</div>
</div>
<!-- ITEM-->
</div>
</div>
<div class="item">
<div class="row text-center">
<!-- ITEM-->
<div class="col-md-3">
<div class="thumbnail product-item"> <a class="img-responsive" href="/current-buzz"><img src="{% static 'img/buzzbutton.jpg' %}"/></a>
</div>
</div>
<!-- ITEM-->
<!-- ITEM-->
<div class="col-md-3">
<div class="thumbnail product-item"> <a class="img-responsive" href="/current-buzz"><img src="{% static 'img/recipebutton.jpg' %}"/></a>
</div>
</div>
<!-- ITEM-->
<!-- ITEM-->
<div class="col-md-3">
<div class="thumbnail product-item"> <a class="img-responsive" href="/current-buzz"><img src="{% static 'img/buzzbutton.jpg' %}"/></a>
</div>
</div>
<!-- ITEM-->
<!-- ITEM-->
<div class="col-md-3">
<div class="thumbnail product-item"> <a class="img-responsive" href="/current-buzz"><img src="{% static 'img/recipebutton.jpg' %}"/></a>
</div>
</div>
<!-- ITEM-->
</div>
</div>
</div>
<!-- /INNER-->
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel2" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
</div>
</div>
现在设置为一次显示4张图片。事情是我有8个图像。在上面的旋转木马上它一次显示4张图片,然后幻灯片到下一张4.这是Javascript:
Now this is set to show 4 images at a time. The thing is I have 8 images. In the carousel above it displays 4 images at a time and then slides to the next 4. Here's the Javascript:
<script type="text/javascript">
$('.carousel.slide').carousel()
</script>
和CSS:
@media (max-width: 767px){
.carousel .row .span3 {
display: block;
float: left;
width: 25%;
margin-left: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
}
.carousel .carousel-control { visibility: hidden; }
如何使图像在连续循环中只移动一次?
How do I get the images to move only one-at-a-time in a continuous loop?
推荐答案
查看Bootply: http ://bootply.com/94452
Take a look at this Bootply: http://bootply.com/94452
您可以使用jQuery相应地克隆项目。
You can use jQuery to clone() the items accordingly..
$('.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<2;i++) {
next=next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});
这篇关于Twitter Bootstrap - 多图像(缩略图)轮播 - 一次移动一个缩略图的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!