Карусель Bootstrap работает неправильно

Я пытаюсь использовать загрузочную карусель. Я скопировал пример, но он работает неправильно. Когда я нажимаю стрелку, слайд-шоу отображается слева или справа от div, а затем меняю положение. Я тоже пользуюсь инспинией. Что случилось?

<div id="carousel-example-generic2" class="carousel slide">
            <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic2" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic2" data-slide-to="1"></li>
                <li data-target="#carousel-example-generic2" data-slide-to="2"></li>
            </ol>
            <div class="carousel-inner">
                <div class="item active">
                    <img src="http://placehold.it/1280x500" alt="">
                    <div class="carousel-caption">
                        <h3>To jest opis</h3>
                        <p>pierwszego slajdu</p>
                    </div>
                </div>

                <div class="item">
                    <img src="https://speckyboy.com/wp-content/uploads/2012/04/jquery-new-plugin-22.jpg" alt="">
                    <div class="carousel-caption">
                        <h3>To jest opis</h3>
                        <p>drugiego slajdu</p>
                    </div>
                </div>

                <div class="item">
                    <img src="http://placehold.it/1280x500" alt="">
                    <div class="carousel-caption">
                        <h3>To jest opis</h3>
                        <p>trzeciego slajdu</p>
                    </div>
                </div>

            </div>

            <a class="left carousel-control" href="#carousel-example-generic2" data-slide="prev">
                <span class="icon-prev"></span>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic2" data-slide="next">
                <span class="icon-next"></span>
            </a>
        </div>

пример Слева первый слайд, а второй справа. Красная стрелка показывает направление.


html slideshow bootstrap-carousel
person marmite    schedule 28.12.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Возможно, вы неправильно включаете библиотеки. Это работает

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="carousel-example-generic2" class="carousel slide">
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic2" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic2" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic2" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="item active">
      <img src="http://placehold.it/1280x500" alt="">
      <div class="carousel-caption">
        <h3>To jest opis</h3>
        <p>pierwszego slajdu</p>
      </div>
    </div>

    <div class="item">
      <img src="https://speckyboy.com/wp-content/uploads/2012/04/jquery-new-plugin-22.jpg" alt="">
      <div class="carousel-caption">
        <h3>To jest opis</h3>
        <p>drugiego slajdu</p>
      </div>
    </div>

    <div class="item">
      <img src="http://placehold.it/1280x500" alt="">
      <div class="carousel-caption">
        <h3>To jest opis</h3>
        <p>trzeciego slajdu</p>
      </div>
    </div>

  </div>

  <a class="left carousel-control" href="#carousel-example-generic2" data-slide="prev">
    <span class="icon-prev"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic2" data-slide="next">
    <span class="icon-next"></span>
  </a>
</div>

person Alvarez    schedule 28.12.2017