Jquery 引导转盘未在中心对齐

我正在开发一个带有

引导功能的旋转木马，目标是显示5个图像，每次滑动时，它前进1

目前我实际遇到的问题是，元素没有显示在框内，事务也不干净

这是完整的。有人知道如何解决这个问题吗？
提前感谢您的回复
 试试这个（根据您的喜好定制）：







如果它不起作用；只需在外部添加一个容器div。
从容器中删除class
col-md-offset-3
^ ^ ^
谢谢！似乎已经解决了内联显示的问题，但我仍然得到一个奇怪的动画效果。是的，我可以看到一些奇怪的事情，我不知道为什么会发生。坦白地说，构建一个新的滑块比试图找出原因花费的时间要少：是的，我知道，但我不得不让滑块与引导一起工作。也许它与javascript有关。我会努力找出原因的。Bootstrap非常棒！carousel的实现非常简单。告诉我的客户dude:）我很清楚，owl carousel实际上是最简单的使用方法之一。似乎无法解决问题，您只是添加了一些控制器来滑动图像。
<div id="imgCarouselSlider" class="carousel slide">
        <ol class="carousel-indicators">
            <li data-target="#imgCarouselSlider" class="active" data-slide-to="0" ></li>
            <li data-target="#imgCarouselSlider" data-slide-to="1" ></li>
            <li data-target="#imgCarouselSlider" data-slide-to="2" ></li>
            <li data-target="#imgCarouselSlider" data-slide-to="3" ></li>
        </ol>
        <div class="carousel-inner">
            <div class="item active">
                <img src="img/carousel-img1.png" class="img-responsive"/>
            </div>
            <div class="item">
                <img src="img/carousel-img2.png" class="img-responsive"/>
            </div>
            <div class="item">
                <img src="img/carousel-img3.png" class="img-responsive"/>
            </div>
            <div class="item">
                <img src="img/carousel-img4.png" class="img-responsive"/>
            </div>
        </div>
        <a class="carousel-control left" href="#imgCarouselSlider" data-slide="prev">
            <span class="icon-prev"></span>
        </a>
        <a class="carousel-control right" href="#imgCarouselSlider" data-slide="next">
        <a class="carousel-control right" href="#imgCarouselSlider" data-slide="next">
            <span class="icon-next"></span>
        </a>
    </div>