3
Проверить этот пример http://www.bootply.com/94452Горизонтальный Multiple бегунок элемент с 1 пункт свитком в HTML/CSS (нет Plugin) с Bootstrap 3.3. +
мне нужно сделать так же горизонтальный многофункциональный ползунок элемента без использования плагина. Я хочу сделать это в html css и js/jquery.
Над слайдером не работает, когда он скопировал его и попытался, он скользит по всему элементу на экране, а затем в конце прокручивается только один раз.
Я хочу, чтобы скользить элемент 1 на 1.
После последнего пункта должен быть первым, другими словами слайдах должны быть циркулярно.
Товары, содержащие изображения и другое содержимое. Вот код, который я попробовал.
<style>
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
.carousel-inner .active.left { left: -25%; }
.carousel-inner .next { left: 25%; }
.carousel-inner .prev { left: -25%; }
.carousel-control { width: 4%; }
.carousel-control.left,.carousel-control.right {margin-left:15px;background-image:none;}
</style>
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="col-md-12 text-center"><h3>Bootstrap 3 Multiple Slide Carousel</h3></div>
<div class="col-md-6 col-md-offset-3">
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/e499e4/fff&text=1" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/e477e4/fff&text=2" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-3"><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"><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"><a href="#"><img src="http://placehold.it/500/f566f5/333&text=5" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/f477f4/fff&text=6" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/eeeeee&text=7" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/fcfcfc/333&text=8" class="img-responsive"></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>
<script>
$(document).ready(function() {
$('#myCarousel').carousel({
interval: 4000
})
$('.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));
}
});
});
</script>
Любой может исправить этот или любой лучший код. Заранее спасибо
http://codepen.io/mephysto/pen/ZYVKRY –
@ Lalji Tadhani Вы пробовали его на местном. он имеет ошибку, аналогичную моему коду. поскольку он хорошо работает на codepen.io, но не работает хорошо на местном –