Bootstrap Carousel Not Working

Я борюсь с карусели Bootstrap на моем сайте. Я следил за инструкциями и искал ответы здесь, и я все еще застрял, кажется, что все, что я сделал, это нормально ... ясно, что это не так! Моя карусель не работает. Почему это не работает?Bootstrap Carousel Not Working

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

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

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

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

    <title>Hello World!</title> 

    <!-- Bootstrap core CSS --> 
    <link href="css/bootstrap.css" rel="stylesheet"> 
    <link href="css/style.css" rel="stylesheet"> 
    <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'> 
    <link href='https://fonts.googleapis.com/css?family=Catamaran:300,400,100' rel='stylesheet' type='text/css'> 

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


<script type="text/javascript"> 

$(document).ready(function() { 
    $('#myCarousel').carousel({ 
    //options here 
    }); 
}); 

</script> 
    <!-- Custom styles for this template go here --> 

    <!-- Just for debugging purposes. Don't actually copy this line! --> 
    <!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]--> 

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> 
    <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 
     <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> 
    <![endif]--> 
    </head> 

    <body> 

     <div class="nav"> 

      <div class="logoimg"> 

       <img src="img/logo3.png"> 


      </div> 

      <ul> 
       <li><a href="index.html">Home</a> 
       </li> 
       <li><a href="about.html">About</a> 
       </li> 
       <li><a href="faq.html">FAQ</a> 
       </li> 
       <li><a href="contact.html">Contact</a> 
       </li> 
      </ul> 
     </div> 


     <!-- Carousel --> 

     <div id="carousel" class="carousel slide" data-ride="carousel"> 
      <!-- Indicators --> 
      <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> 

      <!-- Wrapper for slides --> 
      <div class="carousel-inner" role="listbox"> 
       <div class="item active"> 
        <img src="img/slide1.jpg" alt="Slide 1"> 
       </div> 

       <div class="item"> 
        <img src="img/slide2.jpg" alt="Slide 2"> 
       </div> 

       <div class="item"> 
        <img src="img/slide3.jpg" alt="Slide 3"> 
       </div> 
      </div> 


      <!-- Controls --> 
      <a class="left carousel-control" href="#carousel" 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" role="button" data-slide="next"> 
       <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
       <span class="sr-only">Next</span> 
      </a> 
      <a class="right carousel-control" href="#carousel" role="button" data-slide="next"> 
       <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
       <span class="sr-only">Next</span> 
      </a> 
     </div> 


     <!-- Carousel End--> 


    </body> 

    </html>

источник

2015-09-15 bluetint

Привет - пожалуйста, покажите ваши ссылки скрипта - порядок вашей загрузки сценария может привести не работать. –

Вы предоставили больше кода, но мой ответ по-прежнему применяется. Для этого вам нужно jQuery. Пожалуйста, прочтите ниже. Вы можете загрузить локальную копию jQuery, если хотите, и загрузить ее на свой сайт, но я считаю, что использование CDN столь же эффективно, если не лучше. –

Привет, спасибо! Я попробую это сейчас. Мой мозг на кривой обучения здесь LOL! – bluetint

Очень просто положить, вы не включили библиотеку jQuery. Здесь консоль ошибка показывает:

ReferenceError: $ is not defined

9 раз из 10 этого может быть решена путем загрузки JQuery в head документа. Как так:

<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'> 
<link href='https://fonts.googleapis.com/css?family=Catamaran:300,400,100' rel='stylesheet' type='text/css'> 
<!-- This is the important part --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

В сущности, ваниль Javascript не имеет представления о том, что означает этот код, как это специфично для JQuery синтаксиса:

$(document).ready(function() { 
    $('#myCarousel').carousel({ 
    //options here 
    }); 
});

Поэтому ваша карусель никогда не загружается или оказанной, и только равнина Показывается HTML.

источник

2015-09-15 20:36:06

Теперь он работает! Большое спасибо! Я снова посмотрел на мои учебные материалы, и все там ... Я пропустил довольно важный бит ... Ха-ха ... Спасибо! – bluetint

Если это предоставило разумный ответ на ваш вопрос, выберите мой зеленый квадрат рядом с стрелками для голосования. –

Порядок также важен. Сначала вы должны включить jquery и затем bootstrap, иначе это не сработает.

Это правильный порядок:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" ></script>

источник

2015-12-18 18:50:50 Bettelbursche

Bootstrap Carousel Not Working

ответ

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