2013-03-28 3 views
1

Я скопировал HTML-код ниже. Я не знаю почему, но когда я открою его в браузере, он застрял на первом изображении и не перейдет ... У меня есть включил весь код ниже моего html. Файлы CSS и JS представляют собой общие файлы начальной загрузки.Twitter Bootstrap- Невозможно получить Карусель для изменения изображения

<!DOCTYPE html> 
<html> 
<head> 
<title>Bootstrap test site</title> 

<link rel="stylesheet" href="css/bootstrap.css" type="text/css"> 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="js/bootstrap.js"></script> 

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



</head> 

<body> 
    <div class="container"> 

    <div class="span8"> <img src="img/logo_title.png"> </div> 

     <div> 

      <div id="this-carousel-id" class="carousel slide"> 
       <div class="carousel-inner"> 
       <div class="item active"> 
        <img src="http://placehold.it/1200x480" alt="" /> 
        <div class="carousel-caption"> 
        <p>Caption text here1</p> 
        </div> 
       </div> 
       <div class="item"> 
        <img src="http://placehold.it/1200x480" alt="" /> 
        <div class="carousel-caption"> 
        <p>Caption text here2</p> 
        </div> 
       </div> 
       <div class="item"> 
        <img src="http://placehold.it/1200x480" alt="" /> 
        <div class="carousel-caption"> 
        <p>Caption text here3</p> 
        </div> 
       </div> 
       <div class="item"> 
        <img src="http://placehold.it/1200x480" alt="" /> 
        <div class="carousel-caption"> 
        <p>Caption text here4</p> 
        </div> 
       </div> 
       </div><!-- /.carousel-inner --> 
       <!-- Next and Previous controls below 
        href values must reference the id for this carousel --> 
       <a class="carousel-control left" href="#this-carousel-id" data-slide="prev">&lsaquo;</a> 
       <a class="carousel-control right" href="#this-carousel-id" data-slide="next">&rsaquo;</a> 
      </div><!-- /.carousel --> 
     </div> 

    </div> 

<script src="js/bootstrap.js"></script> 


</body> 
</html> 

ответ

1

Для любой библиотеки JS в бутстрапе убедитесь, что вы включили в нее фактическую библиотеку. В вашем случае вы оставили библиотеку карусели. Другие надстройки Bootstrap, которые требуют отдельных js-файлов, включают в себя модалы, выпадающие списки и всплывающие подсказки. Добавьте его в:

<script src="/js/bootstrap-carousel.js"></script> 
<script src="/js/jquery.js"></script> 

Вы также включены bootstrap.js дважды.

+0

Где я могу найти этот файл? На сайте Bootstrap говорится: «Индивидуально или скомпилировано Плагины могут быть включены индивидуально (хотя некоторые из них имеют необходимые зависимости) или все сразу. Оба bootstrap.js и bootstrap.min.js содержат все плагины в одном файле». Следовательно; если он включает их, почему мне нужно добавить другой файл? – user2219740

+0

вытащите главный репозиторий github git: //github.com/twitter/bootstrap.git или загрузите только то, что вам нужно: https://github.com/twitter/bootstrap/tree/master/js – munch1324

+0

Я скачал и включил файл, и он все еще не работает. Извините, я крупный новичок с JS. @ munch1324 – user2219740

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