Can you please tell me why the carousel does not work? (((Animation does not work, changing the slide by clicking on the navigation arrows .... I’m already 40 minutes worried, I don’t understand ((

<link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> <link href="css/dopstyle.css" rel="stylesheet" media="screen"> <!-- Карусель --> <div id="myCarousel" class="carousel slide" data-interval="3000" data-ride="carousel"> <!-- Индикаторы для карусели --> <ol class="carousel-indicators"> <!-- Перейти к 0 слайду карусели с помощью соответствующего индекса data-slide-to="0" --> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <!-- Перейти к 1 слайду карусели с помощью соответствующего индекса data-slide-to="1" --> <li data-target="#myCarousel" data-slide-to="1"></li> <!-- Перейти к 2 слайду карусели с помощью соответствующего индекса data-slide-to="2" --> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- Слайды карусели --> <div class="carousel-inner"> <!-- Слайды создаются с помощью контейнера с классом item, внутри которого помещается содержимое слайда --> <div class="item active"> <img src="images/1.jpg" alt="arbolit"> <h2>Arbolit</h2> <div class="carousel-caption"> <h3>Заголовок 1 слайда</h3> <p>Текст (описание) 1 слайда...</p> </div> </div> <!-- Слайд №2 --> <div class="item"> <img src="images/2.jpg" alt="arbolit"> <h2>Slide 2</h2> <div class="carousel-caption"> <h3>Second slide label</h3> <p>Aliquam sit amet gravida nibh, facilisis gravida odio.</p> </div> </div> <!-- Слайд №3 --> <div class="item"> <img src="images/3.jpg" alt="arbolit"> <h2>Slide 3</h2> <div class="carousel-caption"> <h3>Third slide label</h3> <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p> </div> </div> </div> <!-- Навигация для карусели --> <!-- Кнопка, осуществляющая переход на предыдущий слайд с помощью атрибута data-slide="prev" --> <a class="carousel-control left" href="#myCarousel" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <!-- Кнопка, осуществляющая переход на следующий слайд с помощью атрибута data-slide="next" --> <a class="carousel-control right" href="#myCarousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div>

  • bootstrap.js - hooked up? - soledar10
  • @ soledar10 <link href = "css / bootstrap.min.css" rel = "stylesheet" media = "screen"> <link href = "css / dopstyle.css" rel = "stylesheet" media = "screen"> <script src = "js / bootstrap.js"> </ script> <script src = "js / bootstrap.min.js"> </ script> and still does not flip through ( - DaniiL337

1 answer 1

Add bootstrap.js. Check the paths to the js / css files.

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="css/dopstyle.css" rel="stylesheet" media="screen"> <!-- Карусель --> <div id="myCarousel" class="carousel slide" data-interval="3000" data-ride="carousel"> <!-- Индикаторы для карусели --> <ol class="carousel-indicators"> <!-- Перейти к 0 слайду карусели с помощью соответствующего индекса data-slide-to="0" --> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <!-- Перейти к 1 слайду карусели с помощью соответствующего индекса data-slide-to="1" --> <li data-target="#myCarousel" data-slide-to="1"></li> <!-- Перейти к 2 слайду карусели с помощью соответствующего индекса data-slide-to="2" --> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- Слайды карусели --> <div class="carousel-inner"> <!-- Слайды создаются с помощью контейнера с классом item, внутри которого помещается содержимое слайда --> <div class="item active"> <img src="images/1.jpg" alt="arbolit"> <h2>Arbolit</h2> <div class="carousel-caption"> <h3>Заголовок 1 слайда</h3> <p>Текст (описание) 1 слайда...</p> </div> </div> <!-- Слайд №2 --> <div class="item"> <img src="images/2.jpg" alt="arbolit"> <h2>Slide 2</h2> <div class="carousel-caption"> <h3>Second slide label</h3> <p>Aliquam sit amet gravida nibh, facilisis gravida odio.</p> </div> </div> <!-- Слайд №3 --> <div class="item"> <img src="images/3.jpg" alt="arbolit"> <h2>Slide 3</h2> <div class="carousel-caption"> <h3>Third slide label</h3> <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p> </div> </div> </div> <!-- Навигация для карусели --> <!-- Кнопка, осуществляющая переход на предыдущий слайд с помощью атрибута data-slide="prev" --> <a class="carousel-control left" href="#myCarousel" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <!-- Кнопка, осуществляющая переход на следующий слайд с помощью атрибута data-slide="next" --> <a class="carousel-control right" href="#myCarousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div>

  • one
    There was a connection error. I did not think that she would be so stupid this mistake (thank you - DaniiL337