Carousel bootstrap does not work, the script is not executed (it seems)

Navigation
1

Hello very good to all the community :) I was doing the design of a web page using bootstrap when I tried to create a carousel but instead of running correctly I put the images on top of each other, instead of contained in the window of carousel with the slider running like this:

A curious fact is that the second image has the prev / next arrows and if you click the web page goes up a bit (such as placing the image so that it is visible) but nothing else and the indicator of the stripes that tells you what photo you are visualizing appears in the third image. Here I leave the code to see if someone can help me ... thank you very much! : 

<!DOCTYPE html>

<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hotel City House Florida Norte</title>

<!-- Bootstrap-->


<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

</head>

<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand" href="HomeHotel.html">Home</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item"> <a class="nav-link" href="#">Faranda Rewards</a> </li>
      <li class="nav-item"> <a class="nav-link" href="#">Ofertas</a> </li>
      <li class="nav-item"> <a class="nav-link" href="#">Habitaciones</a> </li>
      <li class="nav-item"> <a class="nav-link" href="#">Fotos</a> </li>
      <li class="nav-item"> <a class="nav-link" href="#">Servicios</a> </li>
      <li class="nav-item"> <a class="nav-link" href="#">Restaurantes</a> </li>
      <li class="nav-item"> <a class="nav-link" href="#">Salones</a> </li>
      <li class="nav-item"> <a class="nav-link" href="#">Opiniones</a> </li>
      <li class="nav-item"> <a class="nav-link" href="#">Mapa</a> </li>
      <li class="nav-item"> <a class="nav-link" href="#">Mi reserva</a> </li>
      <li class="nav-item"> <a class="nav-link" href="#">Contacto</a> </li>
      <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Desplegable </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Opcion 1</a> <a class="dropdown-item" href="#">Opcion 2</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Opción ultima</a> </div>
      </li>
      <li class="nav-item"> <a class="nav-link disabled" href="#">Algo por aqui dani?</a> </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="¿Qué necesitas?" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Búsqueda</button>
    </form>
  </div>
</nav>
<div class="jumbotron jumbotron-fluid text-center"> <img class="img-fluid" src="images/logoweb_florida.png" alt="logoweb_florida"> <br>
  <br>
  <br>
  <br>
  <h1 class="display-4">Hotel City House</h1>
  <p class="lead">Florida Norte - Madrid</p>
  <hr class="my-4">
  <br>
  <br>
  <p>¡RESERVE AHORA!</p>
  <p class="lead"> <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a> </p>
</div>
<div class="container">
  <div class="row">
    <div id="myCarousel" class="carousel slide" data-ride="carousel"> 

      <!-- Indicators -->

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

      <!-- Wrapper for slides -->

      <div class="carousel-inner">
        <div class="item active"> <img src="images/Desayuno hotel presentacion.jpg" alt="Desayuno del hotel" width="1010" height="500"> </div>
        <div class="item"> <img src="images/Exteriores nocturno ppio presentacion.jpg" alt="Exteriores con vistas a principe pio en la noche" width="1010" height="500"> </div>
        <div class="item"> <img src="images/Exteriores presentacion.jpg" alt="Exteriores del hotel en el dia" width="1010" height="500"> </div>
      </div>

      <!-- Left and right controls --> 

      <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
       </a>
      <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a> 
    </div>
  </div>
  <br>
  <hr>
  <br>
  <div class="row">
    <div class="col-md-4">
      <div class="card"> <img class="card-img-top" src="images/card-img.png" alt="Card image cap">
        <div class="card-body">
          <h4 class="card-title">Card title</h4>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <br>
          <br>
          <a href="#" class="btn btn-primary">Go somewhere</a> </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="card-link">Card link</a> <a href="#" class="card-link">Another link</a> </div>
      </div>
      <br>
      <br/>
      <div class="card">
        <div class="card-header"> Featured </div>
        <ul class="list-group list-group-flush">
          <li class="list-group-item">Cras justo odio</li>
          <li class="list-group-item">Dapibus ac facilisis in</li>
          <li class="list-group-item">Vestibulum at eros</li>
        </ul>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card"> <img class="card-img-top" src="images/card-img.png" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">Some text to build on the card's content.</p>
        </div>
        <ul class="list-group list-group-flush">
          <li class="list-group-item">Cras justo odio</li>
          <li class="list-group-item">Dapibus ac facilisis in</li>
        </ul>
        <div class="card-body"> <a href="#" class="card-link">Card link</a> <a href="#" class="card-link">Another link</a> </div>
      </div>
    </div>
  </div>
  <br/>
  <br/>
  <div class="row">
    <div class=" col-md-4"> Click here to select this<strong> column.</strong> Always place your content within a column. Columns are indicated by a dashed blue line. </div>
    <div class="col-md-4 "> You can <strong>resize a column</strong> using the handle on the right. Drag it to increase or reduce the number of columns.</div>
    <div class="col-md-4 "> You can <strong>offset a column</strong> using the handle on the left. Drag it to increase or reduce the offset. </div>
  </div>
  <br/>
  <br/>
  <div class="row">
    <div class="col-md-6 text-center">
      <div class="card">
        <div class="card-body">
          <h3>Adding <strong>Buttons</strong></h3>
          <p>Quickly add buttons to your page by using the button component in the insert panel. </p>
          <button type="button" class="btn btn-info btn-md">Info Button</button>
          <button type="button" class="btn btn-success btn-md">Success Button</button>
        </div>
      </div>
    </div>
    <div class="text-center col-md-6">
      <div class="card">
        <div class="card-body">
          <h3>Adding <strong>Badges</strong></h3>
          <p>Using the insert panel, add badge to your page by using the badge component.</p>
          <span class="badge badge-info">Info Badge</span> <span class="badge badge-danger">Danger Badge</span> </div>
      </div>
    </div>
  </div>
  <br>
  <hr>
  <div class="row">
    <div class="text-center col-lg-6 offset-lg-3">
      <h4>Footer </h4>
      <p>Copyright &copy; 2018 &middot; All Rights Reserved &middot; <a href="#" >My Website</a></p>
    </div>
  </div>
</div>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins)-->

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<!-- Include all compiled plugins (below), or include individual files as needed-->

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins)  
<script src="js/jquery-3.2.1.min.js"></script> -->

<!-- Include all compiled plugins (below), or include individual files as needed 
<script src="js/popper.min.js"></script> 
<script src="js/bootstrap-4.0.0.js"></script> -->
</body>
</html>
    
asked by David Fernández cruz 14.09.2018 в 12:36
source

2 answers

1

The problem is in the name of the class of the items.

You have put the following: 

<div class="carousel-inner">
        <div class="item active"> <img src="images/Desayuno hotel presentacion.jpg" alt="Desayuno del hotel" width="1010" height="500"> </div>
        <div class="item"> <img src="images/Exteriores nocturno ppio presentacion.jpg" alt="Exteriores con vistas a principe pio en la noche" width="1010" height="500"> </div>
        <div class="item"> <img src="images/Exteriores presentacion.jpg" alt="Exteriores del hotel en el dia" width="1010" height="500"> </div>
      </div>

And the carousel-inner classes have to be carousel-item . So it would look like this: 

<div class="carousel-inner">
            <div class="carousel-item active"> <img src="images/Desayuno hotel presentacion.jpg" alt="Desayuno del hotel" width="1010" height="500"> </div>
            <div class="carousel-item"> <img src="images/Exteriores nocturno ppio presentacion.jpg" alt="Exteriores con vistas a principe pio en la noche" width="1010" height="500"> </div>
            <div class="carousel-item"> <img src="images/Exteriores presentacion.jpg" alt="Exteriores del hotel en el dia" width="1010" height="500"> </div>
          </div>
    
answered by 14.09.2018 / 13:57
source
1

Why the Jquery library is commented ?, You should load the jquery lib. And you're missing Carousel initializing. 

$( document ).ready(function(){
    $('.carousel').carousel({
      interval: 2000
    })
});

This code should be added between <script> tags just before closing the </body>

    
answered by 14.09.2018 в 13:48
how to add an id to an element created by means of a createElement ("tag"); Error inserting into mysql DB with PHP PDO