Bootstrap 3 Карусель не работает. (Да, у меня есть jQuery, загруженный до Bootstrap)

Я конвертирую приложение в Bootstrap 3. Вот код на моей странице с карусельной страницей целиком. Да, у меня загружен jQuery до загрузки Bootstrap.js. По какой-то причине, карусель просто не будет работать. В частности: предыдущие/следующие кнопки не работают, и карусель автоматически не переходит на следующий слайд.Bootstrap 3 Карусель не работает. (Да, у меня есть jQuery, загруженный до Bootstrap)

Испытано на:

Safari 6.0.5
Chrome 28.0.1500.95
Firefox 23.0

... на Mac OS X 10.8.4

<!doctype html> 
<html lang="en"> 

<head> 
    <meta charset="UTF-8"> 

    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 

    <!--[if lt IE 9]> 
     <script src="" alt-src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> 
    <![endif]--> 

    <script src="http://code.jquery.com/jquery.js"></script> 

    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"></script> 
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="css/bootstrap-glyphicons.css" type="text/css"> 

    <title>Carousel Test</title> 
    <meta name="description" content=""> 
    <meta name="keywords" content=""> 

    <script> 
     // Added this just so I didn't have to wait 5 seconds to see if the transition worked. // 
     $(document).ready(function() { 
      $('#Carousel').carousel({ 
       interval: 1000 
      }); 
     }); 
    </script> 
</head> 

<body> 
    <div id="Carousel" class="carousel slide"> 
     <ol class="carousel-indicators"> 
      <li data-target="Carousel" data-slide-to="0" class="active"></li> 
      <li data-target="Carousel" data-slide-to="1"></li> 
      <li data-target="Carousel" data-slide-to="2"></li> 
     </ol> 

     <div class="carousel-inner"> 
      <div class="item active"> 
       <img src="img/Carousel/001.jpg"> 
      </div> 
     </div> 

     <div class="carousel-inner"> 
      <div class="item"> 
       <img src="img/Carousel/002.jpg"> 
      </div> 
     </div> 

     <div class="carousel-inner"> 
      <div class="item"> 
       <img src="img/Carousel/003.jpg"> 
      </div> 
     </div> 

     <a class="left carousel-control" href="#Carousel" data-slide="prev"> 
      <span class="glyphicon glyphicon-chevron-left"></span> 
     </a> 
     <a class="right carousel-control" href="#Carousel" data-slide="next"> 
      <span class="glyphicon glyphicon-chevron-right"></span> 
     </a> 
    </div> 
</body> 
</html>

У кого-нибудь есть представление о том, почему это не работает?

источник

2013-08-07 David Byers

Неужели ваша консоль дает вам какие-либо ошибки? –

Не на загрузку страницы ... а не при нажатии предыдущей и следующей кнопок. Когда я нажимаю индикаторы карусели, я получаю «TypeError:« null »не является объектом (оценивая« e.data («bs.carousel»). To »)» на bootstrap.min.js, строка 6. –

Спасибо, что задали этот вопрос. Проблема у меня была не в загрузке jquery ;-) – whitehat

Попробуйте один carousel-inner с несколькими item там внутри ..

<div id="Carousel" class="carousel slide"> 
     <ol class="carousel-indicators"> 
      <li data-target="Carousel" data-slide-to="0" class="active"></li> 
      <li data-target="Carousel" data-slide-to="1"></li> 
      <li data-target="Carousel" data-slide-to="2"></li> 
     </ol> 

     <div class="carousel-inner"> 
      <div class="item active"> 
       <img src="img/Carousel/001.jpg"> 
      </div> 
      <div class="item"> 
       <img src="img/Carousel/002.jpg"> 
      </div> 
      <div class="item"> 
       <img src="img/Carousel/003.jpg"> 
      </div> 
     </div> 

     <a class="left carousel-control" href="#Carousel" data-slide="prev"> 
      <span class="glyphicon glyphicon-chevron-left"></span> 
     </a> 
     <a class="right carousel-control" href="#Carousel" data-slide="next"> 
      <span class="glyphicon glyphicon-chevron-right"></span> 
     </a> 
    </div>

Демо: http://bootply.com/72622

источник

2013-08-07 18:24:34 ZimSystem

Это было сделано. Благодаря! –

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

Вы должны добавить хэштегом к цели данных:

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

источник

2014-01-25 21:49:12

-1

Для слайдера, чтобы работать, вы должны включать в себя:

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

в нижней части документа (до тела закрывающий тег)

источник

2016-03-09 15:04:33 Dsp

Вниз голосование по двум причинам: 1. Вопрос 2 года. 2. Загрузочный javascript загружается в строке 15. –

Это должно помочь кому-то, кто застрял как я, несмотря на то, что правильно написал код. Я пытался найти ошибку в коде, но все было в порядке. Затем я проверил файлы javascript и заметил, что каким-то образом их тип изменился на .js.txt. Поэтому я просто изменил его на .js, и он сработал.

Счастливое кодирование!

источник

2016-07-12 17:59:58

Bootstrap 3 Карусель не работает. (Да, у меня есть jQuery, загруженный до Bootstrap)

ответ

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