2013-03-30 2 views
0

Я пытаюсь использовать Bootstrap CSS Carousel. Левая и правая стрелки не работают, и слайды не переключаются автоматически ... Я не могу понять, почему.PHP: Карусель Bootstrap CSS

Вот мой код:

index.php

<?php 
    include("header.php"); 
?> 
    <body> 

    <?php 
    include("menu.php"); 
    include("carousel.php"); 
    ?> 

    <footer> 
    <p>&copy; 2013 Company</p> 
    </footer> 

    <?php 
    include("script.php"); 
    ?> 
     <script> 
     !function ($) { 
      $(function(){ 
      $('.carousel').carousel() 
      }) 
     }(window.jQuery) 
     </script> 
    </body> 
</html> 

carousel.php

<div id="myCarousel" class="carousel slide"> 
    <div class="carousel-inner"> 
    <div class="item active"> 
     <img src="img/bg1.jpg" alt=""> 
     <div class="container"> 
     <div class="carousel-caption"> 
      <h1>ITEM 1</h1> 
      <p class="lead">Description 1.</p> 
      <a class="btn btn-large btn-primary" href="#">More</a> 
     </div> 
     </div> 
    </div> 

    <div class="item"> 
     <img src="img/bg2.jpg" alt=""> 
     <div class="container"> 
     <div class="carousel-caption"> 
      <h1>ITEM 2</h1> 
      <p class="lead">Description 2.</p> 
      <a class="btn btn-large btn-primary" href="#">More</a> 
     </div> 
     </div> 
    </div> 

    <div class="item"> 
     <img src="img/bg3.jpg" alt=""> 
     <div class="container"> 
     <div class="carousel-caption"> 
      <h1>ITEM 3</h1> 
      <p class="lead">Description 3.</p> 
      <a class="btn btn-large btn-primary" href="#">More</a> 
     </div> 
     </div> 
    </div> 
    </div> 
    <!-- Carousel NAV --> 
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a> 
    <a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a> 
</div> 

script.php (* изм)

<script src="js/jquery.js"></script> 
<script src="js/bootstrap.min.js"></script> 
<script src="js/holder/holder.js"></script> 

PS: Я не может программироваться в JS ни в JQuery.

+0

Вы использовали firebug для диагностики любых ошибок/ошибок при загрузке загрузочного буфера? что все они существуют? –

+1

+1 Кроме того, вы включаете jQuery дважды? После локального и один раз с googleapis.com? – thaJeztah

+1

Ваш заказ bootstrap.min.js или полный файл js? Потому что, если вы ссылаетесь на одно и то же дважды, это вызывает проблемы, поэтому, если ваш bootstrap.min.js не настроен refmove ссылка на другие файлы, такие как bootstrap-carousel.js, bootstrap-collapse.js и т. Д. –

ответ

0

Я понял!

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script> 
    $(document).ready(function(){ 
     $('.carousel').carousel(); 
    }); 
</script> 

Выполнение этого скрипта в начале страницы, а не в конце, заставляет его работать. В файле script.php я запускаю следующие скрипты:

<script src="js/bootstrap.js"></script> 
<script src="/js/bootstrap-carousel.js"></script> 
<script src="/js/jquery.js"></script> 
Смежные вопросы