Почему не работает Bootstrap Carousel Sliders?

Question

Когда я запускаю карусель, изображения поворачиваются автоматически через пять секунд, но когда я нажимаю правую и левую ползунки, она не будет скользить, также ничего не происходит, когда я прокручиваю вниз, чтобы щелкнуть по индикаторам, экран просто прокручивается вверх и вниз, как задержка, любые предложения.

Мой код:

        <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

Может быть, вы забыли связать jQuery и библиотеку начальной загрузки Fiddle

И использовать активную только для одного li

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

Итак, мои собственные кнопки карусели работают, и я вижу пару очевидных различий между вашим кодом и моим кодом (ниже).Я возвращаю кнопку обратно в карусель, и у меня есть определенный бросок «кнопки».Надеюсь, это поможет.

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

Answer 3

удалить 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>