Я создал адаптивный слайдер миниатюр на своем веб-сайте, чтобы перемещать изображения одно за другим вместо перемещения всех изображений за раз. Я отобразил 4 изображения подряд, и он должен перемещаться по одному, но он перемещает все 4 изображения одновременно.
Вот код:
<div class="col-md-12">
<div class="carousel carousel-showmanymoveone slide" id="carousel123">
<div class="carousel-inner carousel-inner2" role="listbox">
<div class="item active images2">
<div class=" col-sm-3 ">
<a href="#" >
<img src="images/doctor1.jpg" alt="Image" class="img-responsive slider" width="170" height="201">
</a>
<div class="carousel-caption dctrss">
<h3 class="heading-caption">Doctor1</h3>
<p>( Orthopedician )</p>
</div>
</div>
</div>
<div class="item images2">
<div class="col-sm-3 ">
<a href="#">
<img src="images/doctor2.jpg" alt="Image" class="img-responsive slider" width="170" height="201">
</a>
<div class="carousel-caption dctrss">
<h3 class="heading-caption">Doctor2</h3>
<p>( Orthopedician )</p>
</div>
</div>
</div>
<div class="item images2">
<div class="col-sm-3 ">
<a href="#">
<img src="images/doctor3.jpg" alt="Image" class="img-responsive slider">
</a>
<div class="carousel-caption dctrss">
<h3 class="heading-caption">Doctor3</h3>
<p>( Orthopedician )</p>
</div>
</div>
</div>
<div class="item images2">
<div class="col-sm-3 ">
<a href="#">
<img src="images/doctor4.jpg" alt="Image" class="img-responsive slider">
</a>
<div class="carousel-caption dctrss">
<h3 class="heading-caption">Doctor4</h3>
<p>( Orthopedician )</p>
</div>
</div>
</div>
<!--/row-->
</div>
<a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
Вот ссылка jsfiddle: http://jsfiddle.net/1gntmoy8/1/