Bootstrap 3 Карусель не работает?

Я пытаюсь создать карусель с 7 изображениями в нем для заголовка веб-сайта. Однако все изображения просто складываются друг над другом. Вот мой код, есть ли что-то, что я делаю неправильно?Bootstrap 3 Карусель не работает?

<div class="row"> 
     <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
      <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
       <!-- Indicators --> 
       <ol class="carousel-indicators"> 
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
        <li data-target="#carousel-example-generic" data-slide-to="1"></li> 
        <li data-target="#carousel-example-generic" data-slide-to="2"></li> 
        <li data-target="#carousel-example-generic" data-slide-to="3"></li> 
        <li data-target="#carousel-example-generic" data-slide-to="4"></li> 
        <li data-target="#carousel-example-generic" data-slide-to="5"></li> 
       </ol> 

       <!-- Wrapper for slides --> 
       <div class="carousel-inner" role="listbox"> 
        <div class="item active"> 
         <img src="images/signtraysandboxpansheader1170x300.png"> 
        </div> 
       </div> 
       <div class="item"> 
        <img src="images/builtupletterheader1170x300.png"> 
       </div> 
       <div class="item"> 
        <img src="images/flatcutlettersheader1170x300.png"> 
       </div> 
       <div class="item"> 
        <img src="images/ledilluminatedlettersheader1170x300.png"> 
       </div> 
       <div class="item"> 
        <img src="images/header1170x450.png"> 
       </div> 
       <div class="item"> 
        <img src="images/totems&monolithheader1170x300.png"> 
       </div> 
       <!-- Controls --> 
       <a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next"> 
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
        <span class="sr-only">Next</span> 
       </a> 
      </div> 
     </div> 
    </div>

источник

2015-12-18 BenRichi_

Вы включили все [соответствующую начальную загрузку, связанные с CSS и JavaScript файлов] (https://www.bootstrapcdn.com/), не так ли? – summea

Ive получил bootstrap.min.css, связанный в заголовке, и это в конце тела: –

Кроме того, вы говорите, что у вас 7 слайдов, но ваш код имеет 6 слайдов и 8 индикаторов. O_o –

Вы потеряли конечный </div> тег для .carousel-inner. Внутренняя часть карусели должна содержать все ваши элементы .item. Сейчас он включает только первый.

http://www.bootply.com/q739Qe9Lvj

источник

2015-12-18 19:24:45

Большое спасибо! –

@BenRichi_ Добро пожаловать. Рад, что смог помочь. –

Bootstrap 3 Карусель не работает?

ответ

Смежные вопросы