自适应缩略图滑块一张一张地移动图像

Question

我在网站上创建了响应式缩略图滑块来一次移动一个图像而不是一次移动所有图像。我已经连续显示了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/

Answer 1

通过将此作为示例来解决

https://www.bootply.com/PMDIAzc1Qo