为什么Bootstrap Carousel Sliders不起作用

Question

当我运行我的旋转木马时，图像会在5秒后自动旋转，但当我单击向右和向左的滑块时，它不会滑动，当我向下滚动单击指示器时，也没有任何反应，屏幕只是像滞后一样上下滚动，任何建议。

我的代码是：

        <div class="carousel slide" data-ride="carousel" id="home-carousel">

            <!--To Create Indicators-->

            <ol class="carousel-indicators">
                <li class="active" data-target="#home-carousel" data-slide-to="0"></li>
                <li class="active" data-target="#home-carousel" data-slide-to="1"></li>
                <li class="active" data-target="#home-carousel" data-slide-to="2"></li>
                <li class="active" data-target="#home-carousel" data-slide-to="3"></li>
            </ol>

            <!-- Wrapper For Slides-->

            <div class="carousel-inner">
                <div class="item active">
                    <img src="Images/Chilli.jpg">
                    <div class="carousel-caption">
                        <h3>A Title</h3>
                        <p>A Caption</p>
                    </div>
                </div>
                <div class="item">
                    <img src="Images/Dough.jpg">
                    <div class="carousel-caption">
                        <h3>A Title</h3>
                        <p>A Caption</p>
                    </div>
                </div>
                <div class="item">
                    <img src="Images/jars.jpg">
                    <div class="carousel-caption">
                        <h3>A Title</h3>
                        <p>A Caption</p>
                    </div>
                </div>
                <div class="item">
                    <img src="Images/Breakfast.jpg">
                    <div class="carousel-caption">
                        <h3>A Title</h3>
                        <p>A Caption</p>
                    </div>
                </div>
            </div>

            <!-- Left and Right Sliders-->

            <a class="left carousel-control" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"><span class="sr-only">PREVIOUS</span></a>
            <a class="right carousel-control" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span>
                <span class="sr-only">NEXT</span></a>
        </div>

谢谢，杰夫

Answer 1

从剩下的幻灯片中删除class="active" ，但首先删除，你就应该完成了，所以基本上它应该是这样的

 <li class="active" data-target="#home-carousel" data-slide-to="0"></li>
                <li  data-target="#home-carousel" data-slide-to="1"></li>
                <li data-target="#home-carousel" data-slide-to="2"></li>
                <li  data-target="#home-carousel" data-slide-to="3"></li>

Answer 2

也许您忘记了链接jQuery和引导程序库

并仅对一个li使用active

<ol class="carousel-indicators">
                <li class="active" data-target="#home-carousel" data-slide-to="0"></li>
                <li class="" data-target="#home-carousel" data-slide-to="1"></li>
                <li class="" data-target="#home-carousel" data-slide-to="2"></li>
                <li class="" data-target="#home-carousel" data-slide-to="3"></li>
            </ol>

Answer 3

因此，我自己的旋转木马按钮正在工作，我可以看到您的代码和我的代码(如下所示)之间的一些明显差异。我将按钮引用回carousel，我得到了一个定义好的" button“卷轴。希望这能有所帮助。

<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>