Bootstrap carousel не продвигается

Я не могу получить Bootstrap карусель для работы. Я просмотрел все сообщения, скопировал все примеры, и ничего не работает. Ниже мой код. Когда я нажимаю на следующую кнопку, ничего не происходит, и она не продвигается автоматически. Чего не хватает?Bootstrap carousel не продвигается

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
    <link href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet"> 
    <link rel="stylesheet" href="css/site.css" type="text/css" media="screen,projection"> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 


</head> 
<body> 
    <div class="container"> 



     <div class="row"> 
      <div class="span12"> 
       <div id="myCarousel" class="carousel slide"> 
        <ol class="carousel-indicators"> 
         <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
         <li data-target="#myCarousel" data-slide-to="1"></li> 

        </ol> 
        <div class="carousel-inner"> 

         <div class="item active"> 
          <img src="img/img1.png" alt=""> 
         </div> 



         <div class="item"> 
          <img src="img/img2.png" alt=""> 
         </div> 


        </div> 

        <!-- Carousel nav --> 
        <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a> 
        <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a> 
       </div> 
      </div> 

     </div> 


    </div> 

</body> 
</html> 


<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script> 
<script> 
    $(document).ready(function() { 
     $('.carousel').carousel({ 
      interval: 2000 
     }) 
    }); 
</script>

источник

2013-06-27 Michele ODell

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

Вы должны включить оба плагина «переходы» и «карусель» JS при создании своего настроенного пакета начальной загрузки, я думаю, вы только отметили «карусель».

Если заменить эту строку:

<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>

По тезисов из них, он должен работать.

<script type="text/javascript" src="http://twitter.github.io/bootstrap/assets/js/bootstrap-transition.js"></script> 
<script type="text/javascript" src="http://twitter.github.io/bootstrap/assets/js/bootstrap-carousel.js"></script>

Я скопировал/вставить код в локальный файл, я изменил свою ссылку на ресурсы для интернет-ресурсов, и это работает для меня. Вот общий файл, только в случае, если мой предыдущий комментарий не ясно:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <!--<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">--> 
    <link href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet"> 
    <!--<link href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">--> 
    <link href="http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet"> 
    <link rel="stylesheet" href="css/site.css" type="text/css" media="screen,projection"> 
</head> 
<body> 
    <div class="container"> 
     <div class="row"> 
      <div class="span12"> 
       <div id="myCarousel" class="carousel slide"> 
        <ol class="carousel-indicators"> 
         <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
         <li data-target="#myCarousel" data-slide-to="1"></li> 

        </ol> 
        <div class="carousel-inner"> 
         <div class="item active"> 
          <img src="http://www.nasa.gov/images/content/662916main_image_2292_800-600.jpg" alt=""> 
         </div> 
         <div class="item"> 
          <img src="http://www.nasa.gov/images/content/200370main_rs_image_feature_827_800x600.jpg" alt=""> 
         </div> 
        </div> 
        <!-- Carousel nav --> 
        <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a> 
        <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a> 
       </div> 
      </div> 
     </div> 
    </div> 
</body> 
</html> 

<!--<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>--> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script type="text/javascript" src="http://twitter.github.io/bootstrap/assets/js/bootstrap-transition.js"></script> 
<script type="text/javascript" src="http://twitter.github.io/bootstrap/assets/js/bootstrap-carousel.js"></script> 

<script> 
    $(document).ready(function() { 
     $('.carousel').carousel({ 
      interval: 2000 
     }) 
    }); 
</script>

источник

2013-06-28 00:30:29 Pascamel

Вот рабочий пример посмотрим, что может работать для вас, как его прекрасно работает для меня.

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

      <div class="carousel-inner"> 
       <div class="item active"> 
        <img src="http://www.ansupalake.in/gallery/tapan%20kumar%201.JPG" alt="1" class="img-responsive" /> 
        <div class="carousel-caption"> 
         <h4 class="text-left">Resting In Style</h4> 

         <p class="text-left">Hi Everybody what's going on.....</p> 
        </div> 
       </div> 
       <div class="item "> 
        <img src="http://www.ansupalake.in/gallery/tapan%20kumar%202.JPG" alt="2" class="img-responsive" /> 
        <div class="carousel-caption"> 
         <h4 class="text-left">The Dude Look</h4> 

         <p class="text-left">Hi Everybody what's going on.....</p> 
        </div> 
       </div> 
       <div class="item "> 
        <img src="http://www.ansupalake.in/gallery/tapan%20kumar.JPG" alt="3" class="img-responsive" /> 
        <div class="carousel-caption"> 
         <h4 class="text-left">How z It??</h4> 

         <p class="text-left">Hi Everybody what's going on.....</p> 
        </div> 
       </div> 
      </div> 
      <a href="#theCarousel" class="carousel-control left" data-slide="prev"> 
        <span class="icon-prev"></span> 
       </a> 
      <a href="#theCarousel" class="carousel-control right" data-slide="next"> 
        <span class="icon-next"></span> 
       </a>    
    </div>

Посмотрите демо-версию здесь с выходом jsfiddle. Carousel Image Slider In Twiter Bootstrap 3

источник

2014-01-09 12:39:38

Bootstrap carousel не продвигается

ответ

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