2

Tengo una página en la que puse una galería de fotografías, quiero que cada fotografía abra una pantalla modal que tiene dos carruseles de fotos.

Todo funciona aparentemente bien, pero me di cuenta que, al momento de abrir la página, el menú no esta activo, por decirlo de alguna manera. En palabras sencillas, paso el cursor sobre el menú y no cambia el cursor, no cambia el color del texto y al dar click no hace nada, pero una vez que abro y cierro la modal, entonces si todo vuelve a funcionar... al pasar el cursor sobre el menú cambia el cursor, cambian los colores y me permite navegar a las páginas que tienen los links del menú...

No se que me este faltando. Ya coloque la modal en diferentes partes del código y en cualquier lado que lo ponga hace lo mismo, en cambio si lo quito todo funciona bien...

Espero me puedan ayudar.. aquí les dejo el código de la modal:

    <!-- Modal para Salón Vitrales -->
    <div class="modal fade" id="modal-vitrales">
      <div class="modal-dialog modal-xl">
        <div class="modal-content">
          <!-- Modal body -->
          <div id="Car-Up-vitrales" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ul class="carousel-indicators">
              <li data-target="#Car-Up-vitrales" data-slide-to="0" class="active"></li>
              <li data-target="#Car-Up-vitrales" data-slide-to="1"></li>
              <li data-target="#Car-Up-vitrales" data-slide-to="2"></li>
            </ul>

            <!-- Wrapper for slides -->
            <div class="carousel-inner">
              <div class="item active">
                <img src="img/body/Vit-up_01.jpg" alt="Salón Vitrales" style="width:100%;">
              </div>
              <div class="item">
               <img src="img/body/Vit-up_02.jpg" alt="Salón Vitrales" style="width:100%;">
              </div>
              <div class="item">
                <img src="img/body/Vit-up_03.jpg" alt="Salón Vitrales" style="width:100%;">
              </div>
            </div>

            <!-- Left and right controls -->
            <a class="left carousel-control" href="#Car-Up-vitrales" data-slide="prev">
              <span class="fas fa-angle-left"></span>
            </a>
            <a class="right carousel-control" href="#Car-Up-vitrales" data-slide="next">
              <span class="fas fa-angle-right"></span>
            </a>
          </div>
          <div id="Car-down-vitrales" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ul class="carousel-indicators">
              <li data-target="#Car-down-vitrales" data-slide-to="0" class="active"></li>
              <li data-target="#Car-down-vitrales" data-slide-to="1"></li>
              <li data-target="#Car-down-vitrales" data-slide-to="2"></li>
              <li data-target="#Car-down-vitrales" data-slide-to="3"></li>
              <li data-target="#Car-down-vitrales" data-slide-to="4"></li>
            </ul>

            <!-- Wrapper for slides -->
            <div class="carousel-inner">
              <div class="item active">
                <img src="img/body/Vit-down_01.jpg" alt="Salón Vitrales" style="width:100%;">
              </div>
              <div class="item">
               <img src="img/body/Vit-down_02.jpg" alt="Salón Vitrales" style="width:100%;">
              </div>
              <div class="item">
                <img src="img/body/Vit-down_03.jpg" alt="Salón Vitrales" style="width:100%;">
              </div>
              <div class="item">
                <img src="img/body/Vit-down_04.jpg" alt="Salón Vitrales" style="width:100%;">
              </div>
              <div class="item">
                <img src="img/body/Vit-down_05.jpg" alt="Salón Vitrales" style="width:100%;">
              </div>
            </div>

            <!-- Left and right controls -->
            <a class="left carousel-control" href="#Car-down-vitrales" data-slide="prev">
              <span class="fas fa-angle-left"></span>
            </a>
            <a class="right carousel-control" href="#Car-down-vitrales" data-slide="next">
              <span class="fas fa-angle-right"></span>
            </a>
          </div>
        </div>        
      </div>
    </div>

Y el código completo que funciona sin la modal:

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

<head>
  <meta charset="utf-8">
  <title>Hotel</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="description" content="Hotel" />
  <meta name="author" content="" />

  <!-- css -->
  <link href="https://fonts.googleapis.com/css?family=Noto+Serif:400,400italic,700|Open+Sans:300,400,600,700" rel="stylesheet">
  <link href="css/bootstrap.css" rel="stylesheet" />
  <link href="css/bootstrap-responsive.css" rel="stylesheet" />
  <link href="css/fancybox/jquery.fancybox.css" rel="stylesheet">
  <link href="css/jcarousel.css" rel="stylesheet" />
  <link href="css/flexslider.css" rel="stylesheet" />
  <link href="css/style.css" rel="stylesheet" />
  <!-- Theme skin -->
  <link href="skins/default.css" rel="stylesheet" />
  <!-- Font Awesome -->
  <link rel="stylesheet" href="font/fontawesome-free/css/all.min.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="font/fontawesome-free/css/ionicons.min.css">
  <!-- Fav and touch icons -->
  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="ico/apple-touch-icon-144-precomposed.png" />
  <link rel="apple-touch-icon-precomposed" sizes="114x114" href="ico/apple-touch-icon-114-precomposed.png" />
  <link rel="apple-touch-icon-precomposed" sizes="72x72" href="ico/apple-touch-icon-72-precomposed.png" />
  <link rel="apple-touch-icon-precomposed" href="ico/apple-touch-icon-57-precomposed.png" />
  <link rel="shortcut icon" href="ico/flaico_pag.png" />

</head>

<body>
  <div id="wrapper">
    <header>
      <div class="navbar navbar-fixed-top">
        <section class="InfoTop">
          <div class="row">
            <div class="hidden-top-inner">
              <div class="span8">
                <ul>
                  <li><a href="#" data-placement="bottom" title="Twitter"><i class="icon-twitter icon-plain"></i></a></li>
                  <li><a href="#" data-placement="bottom" title="Facebook"><i class="icon-facebook icon-plain"></i></a></li>
                  <li><a href="#" data-placement="bottom" title="TripAdvisor"><i class="fab fa-tripadvisor icon-plain"></i></a></li>
                  <li><a href="#" data-placement="bottom" title="YouTube"><i class="fab fa-youtube icon-plain"></i></a></li>
                  <li><i class="icon-phone"></i> +01</li>
                  <li><i class="icon-whats"></i> +52</li>
                </ul>
              </div>
              <div class="span4 floatright">
                <a class="btn btn-large btn-theme btn-rounded e_shake" href="#">Reserva ahora!</a>
              </div>
            </div>
          </div>
        </section>
        <section class="MenuPpal">
          <div class="container">
            <div class="row">
              <div class="span4">
                <a class="navbar-brand" href="index.html"><img src="img/logofla.png" alt=""></a>
              </div>
              <div class="span8">
                <div class="navigation">
                  <nav>
                    <ul class="nav topnav">
                      <li class="dropdown">
                        <a href="index.html">Inicio </a>
                      </li>
                      <li class="dropdown">
                        <a href="index.html#servicios">Servicios e Instalaciones </a>
                      </li>
                      <li class="dropdown">
                        <a href="index.html#galeria">Galeria </a>
                      </li>
                      <li class="dropdown">
                        <a href="habitaciones.html">Habitaciones <i class="icon-angle-down"></i></a>
                        <ul class="dropdown-menu">
                          <li><a href="habitaciones.html#tradicional">Área Tradicional</a></li>
                          <li><a href="habitaciones.html#ejecutiva">Área Ejecutiva</a></li>
                        </ul>
                      </li>
                      <li class="dropdown active">
                        <a href="grupos.html">Grupos y Eventos </i></a>
                      </li>
                      <li>
                        <a href="ubicacion.html">Ubicación </a>
                      </li>
                    </ul>
                  </nav>
                </div>
                <!-- end navigation -->
              </div>
            </div>
          </div>
        </section>
      </div>
    </header>
    <!-- end header -->
    <section id="eventos">
      <div class="container" style="margin-top:150px">
        <div class="row">
          <div class="span12">
            <h4 class="heading">Grupos y Eventos </h4>
          </div>
        </div>
      </div>
    </section>
    <section id="general">
      <div class="container">
        <br>
        <div class="row">        
          <div class="span2">
          </div>
          <div class="span8">
            <p class="aligncenter">
              Si usted desea realizar algún evento social o de negocios, ya sea una junta, seminario, curso, XV’s, baby shower, comida, boda, etcétera, ponemos a su disposición 5 salones con capacidad máxima de 120 personas y una sala de juntas.
            </p>
            <p class="aligncenter">
              Nuestros salones se adaptan a sus necesidades y nuestro equipo de trabajo pone atención a todos los detalles para que sus eventos tengan éxito y sus invitados se vayan satisfechos.
            </p>
          </div>
          <div class="span2">
          </div>
        </div>
      </div>
      <br>
    </section>      
    <section id="salones">
      <div class="container">
        <div class="row">
          <div class="span12">
            <div class="row">
              <ul id="thumbs" class="portfolio">
                <!-- Item Project -->
                <li class="item-thumbs span4 design" data-id="id-0" data-type="web">
                  <a data-toggle="modal" href="#modal-vitrales">
                    <div class="marcoFoto">
                      <img src="img/body/Vitrales_00.jpg" alt="Salón Vitrales">
                    </div>
                  </a>
                </li>
                <!-- End Item Project -->
                <!-- Item Project -->
                <li class="item-thumbs span4 design" data-id="id-1" data-type="web">
                  <a data-toggle="modal" href="#modal-arcos">
                    <div class="marcoFoto">
                      <img src="img/body/Arcos_00.jpg" alt="Salón Arcos">
                    </div>
                  </a>
                </li>
                <!-- End Item Project -->
                <!-- Item Project -->
                <li class="item-thumbs span4 design" data-id="id-2" data-type="web">
                  <a data-toggle="modal" href="#modal-jardin">
                    <div class="marcoFoto">
                      <img src="img/body/Jardin_00.jpg" alt="Salón Jardín">
                    </div>
                  </a>
                </li>
                <!-- End Item Project -->
                <!-- Item Project -->
                <li class="item-thumbs span4 design" data-id="id-3" data-type="web">
                  <a data-toggle="modal" href="#modal-cristal">
                    <div class="marcoFoto">
                      <img src="img/body/Cristal_00.jpg" alt="Salón Cristal">
                    </div>
                  </a>
                </li>
                <!-- End Item Project -->
                <!-- Item Project -->
                <li class="item-thumbs span4 design" data-id="id-4" data-type="web">
                  <a data-toggle="modal" href="#modal-bugambilia">
                    <div class="marcoFoto">
                      <img src="img/body/Bugambilia_00.jpg" alt="Salón Bugambilia">
                    </div>
                  </a>
                </li>
                <!-- End Item Project -->
                <!-- Item Project -->
                <li class="item-thumbs span4 design" data-id="id-5" data-type="web">
                  <a data-toggle="modal" href="#modal-sjuntas">
                    <div class="marcoFoto">
                      <img src="img/body/SJuntas_00.jpg" alt="Sala de Juntas">
                    </div>
                  </a>
                </li>
                <!-- End Item Project -->
              </ul>
            </div>
          </div>
        </div>
        <!-- End Portfolio Projects -->
      </div>
    </section>  
    <footer>
      <div class="container">
        <div class="row">
          <div class="span3">
            <div class="widget">
              <h5 class="widgetheading">Contacto</h5>
              <address>
                <strong>Direccion </strong>
                <br>
                <br>
              </address>
              <p>
                Tel: (442) 101-9696 <br>
                reservacione[email protected]
              </p>
            </div>
          </div>
          <div class="span3">
            <div class="widget">
              <h5 class="widgetheading">Certificaciones</h5>
              <img src="img/footer/certificaciones-footer.jpg">
            </div>
          </div>
          <div class="span3">
            <div class="widget">
              <h5 class="widgetheading">Ofertas Especiales</h5>
                <a class="nav-link active" href="#">Ver mas ... </a>
            </div>
          </div>
          <div class="span3">
            <div class="widget">
              <h5 class="widgetheading">Bolsa de Trabajo</h5>
              <a href="#">[email protected]</a>
            </div>
          </div>
        </div>
      </div>
    </footer>
  </div>
  <a href="#" class="scrollup"><i class="icon-chevron-up icon-square icon-32 active"></i></a>


  <!-- javascript
    ================================================== -->
  <!-- Placed at the end of the document so the pages load faster -->
  <script src="js/jquery.js"></script>
  <script src="js/jquery.easing.1.3.js"></script>
  <script src="js/bootstrap.js"></script>
  <script src="js/jcarousel/jquery.jcarousel.min.js"></script>
  <script src="js/google-code-prettify/prettify.js"></script>
  <script src="js/portfolio/jquery.quicksand.js"></script>
  <script src="js/portfolio/setting.js"></script>
  <script src="js/modernizr.custom.js"></script>
  <script src="js/jquery.ba-cond.min.js"></script>
  <script src="js/jquery.slitslider.js"></script>
  <script src="js/animate.js"></script>

</body>
</html>

1 respuesta 1

1

Al parecer, el problema no está en el modal sino que debe haber un conflicto con las demás librerías que estás usando... Hice pruebas con tu código y con bootstrap solamente y todo tiene el comportamiento normal, por así decirlo. Cambia el cursor y el color al pasar el mouse sobre el menú.

Prueba borrando o comentando las dependencias una a una hasta que encuentres la que genera el conflicto.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <div id="wrapper">
    <header>
      <div class="navbar navbar-fixed-top">
        <section class="InfoTop">
          <div class="row">
            <div class="hidden-top-inner">
              <div class="span8">
                <ul>
                  <li><a href="#" data-placement="bottom" title="Twitter"><i class="icon-twitter icon-plain"></i></a></li>
                  <li><a href="#" data-placement="bottom" title="Facebook"><i class="icon-facebook icon-plain"></i></a></li>
                  <li><a href="#" data-placement="bottom" title="TripAdvisor"><i class="fab fa-tripadvisor icon-plain"></i></a></li>
                  <li><a href="#" data-placement="bottom" title="YouTube"><i class="fab fa-youtube icon-plain"></i></a></li>
                  <li><i class="icon-phone"></i> +01</li>
                  <li><i class="icon-whats"></i> +52</li>
                </ul>
              </div>
              <div class="span4 floatright">
                <a class="btn btn-large btn-theme btn-rounded e_shake" href="#">Reserva ahora!</a>
              </div>
            </div>
          </div>
        </section>
        <section class="MenuPpal">
          <div class="container">
            <div class="row">
              <div class="span4">
                <a class="navbar-brand" href="index.html"><img src="img/logofla.png" alt=""></a>
              </div>
              <div class="span8">
                <div class="navigation">
                  <nav>
                    <ul class="nav topnav">
                      <li class="dropdown">
                        <a href="index.html">Inicio </a>
                      </li>
                      <li class="dropdown">
                        <a href="index.html#servicios">Servicios e Instalaciones </a>
                      </li>
                      <li class="dropdown">
                        <a href="index.html#galeria">Galeria </a>
                      </li>
                      <li class="dropdown">
                        <a href="habitaciones.html">Habitaciones <i class="icon-angle-down"></i></a>
                        <ul class="dropdown-menu">
                          <li><a href="habitaciones.html#tradicional">Área Tradicional</a></li>
                          <li><a href="habitaciones.html#ejecutiva">Área Ejecutiva</a></li>
                        </ul>
                      </li>
                      <li class="dropdown active">
                        <a href="grupos.html">Grupos y Eventos </a>
                      </li>
                      <li>
                        <a href="ubicacion.html">Ubicación </a>
                      </li>
                    </ul>
                  </nav>
                </div>
                <!-- end navigation -->
              </div>
            </div>
          </div>
        </section>
      </div>
    </header>
    <!-- end header -->
    <section id="eventos">
      <div class="container" style="margin-top:150px">
        <div class="row">
          <div class="span12">
            <h4 class="heading">Grupos y Eventos </h4>
          </div>
        </div>
      </div>
    </section>
    <section id="general">
      <div class="container">
        <br>
        <div class="row">        
          <div class="span2">
          </div>
          <div class="span8">
            <p class="aligncenter">
              Si usted desea realizar algún evento social o de negocios, ya sea una junta, seminario, curso, XV’s, baby shower, comida, boda, etcétera, ponemos a su disposición 5 salones con capacidad máxima de 120 personas y una sala de juntas.
            </p>
            <p class="aligncenter">
              Nuestros salones se adaptan a sus necesidades y nuestro equipo de trabajo pone atención a todos los detalles para que sus eventos tengan éxito y sus invitados se vayan satisfechos.
            </p>
          </div>
          <div class="span2">
          </div>
        </div>
      </div>
      <br>
    </section>      
    <section id="salones">
      <div class="container">
        <div class="row">
          <div class="span12">
            <div class="row">
              <ul id="thumbs" class="portfolio">
                <!-- Item Project -->
                <li class="item-thumbs span4 design" data-id="id-0" data-type="web">
                  <a data-toggle="modal" href="#modal-vitrales">
                    <div class="marcoFoto">
                      <img src="img/body/Vitrales_00.jpg" alt="Salón Vitrales">
                    </div>
                  </a>
                </li>
                <!-- End Item Project -->
                <!-- Item Project -->
                <li class="item-thumbs span4 design" data-id="id-1" data-type="web">
                  <a data-toggle="modal" href="#modal-arcos">
                    <div class="marcoFoto">
                      <img src="img/body/Arcos_00.jpg" alt="Salón Arcos">
                    </div>
                  </a>
                </li>
                <!-- End Item Project -->
                <!-- Item Project -->
                <li class="item-thumbs span4 design" data-id="id-2" data-type="web">
                  <a data-toggle="modal" href="#modal-jardin">
                    <div class="marcoFoto">
                      <img src="img/body/Jardin_00.jpg" alt="Salón Jardín">
                    </div>
                  </a>
                </li>
                <!-- End Item Project -->
                <!-- Item Project -->
                <li class="item-thumbs span4 design" data-id="id-3" data-type="web">
                  <a data-toggle="modal" href="#modal-cristal">
                    <div class="marcoFoto">
                      <img src="img/body/Cristal_00.jpg" alt="Salón Cristal">
                    </div>
                  </a>
                </li>
                <!-- End Item Project -->
                <!-- Item Project -->
                <li class="item-thumbs span4 design" data-id="id-4" data-type="web">
                  <a data-toggle="modal" href="#modal-bugambilia">
                    <div class="marcoFoto">
                      <img src="img/body/Bugambilia_00.jpg" alt="Salón Bugambilia">
                    </div>
                  </a>
                </li>
                <!-- End Item Project -->
                <!-- Item Project -->
                <li class="item-thumbs span4 design" data-id="id-5" data-type="web">
                  <a data-toggle="modal" href="#modal-sjuntas">
                    <div class="marcoFoto">
                      <img src="img/body/SJuntas_00.jpg" alt="Sala de Juntas">
                    </div>
                  </a>
                </li>
                <!-- End Item Project -->
              </ul>
            </div>
          </div>
        </div>
        <!-- End Portfolio Projects -->
      </div>
    </section>
    <!-- Modal para Salón Vitrales -->
    <div class="modal fade" id="modal-vitrales">
      <div class="modal-dialog modal-xl">
        <div class="modal-content">
          <!-- Modal body -->
          <div id="Car-Up-vitrales" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ul class="carousel-indicators">
              <li data-target="#Car-Up-vitrales" data-slide-to="0" class="active"></li>
              <li data-target="#Car-Up-vitrales" data-slide-to="1"></li>
              <li data-target="#Car-Up-vitrales" data-slide-to="2"></li>
            </ul>

            <!-- Wrapper for slides -->
            <div class="carousel-inner">
              <div class="item active">
                <img src="img/body/Vit-up_01.jpg" alt="Salón Vitrales" style="width:100%;">
              </div>
              <div class="item">
               <img src="img/body/Vit-up_02.jpg" alt="Salón Vitrales" style="width:100%;">
              </div>
              <div class="item">
                <img src="img/body/Vit-up_03.jpg" alt="Salón Vitrales" style="width:100%;">
              </div>
            </div>

            <!-- Left and right controls -->
            <a class="left carousel-control" href="#Car-Up-vitrales" data-slide="prev">
              <span class="fas fa-angle-left"></span>
            </a>
            <a class="right carousel-control" href="#Car-Up-vitrales" data-slide="next">
              <span class="fas fa-angle-right"></span>
            </a>
          </div>
          <div id="Car-down-vitrales" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ul class="carousel-indicators">
              <li data-target="#Car-down-vitrales" data-slide-to="0" class="active"></li>
              <li data-target="#Car-down-vitrales" data-slide-to="1"></li>
              <li data-target="#Car-down-vitrales" data-slide-to="2"></li>
              <li data-target="#Car-down-vitrales" data-slide-to="3"></li>
              <li data-target="#Car-down-vitrales" data-slide-to="4"></li>
            </ul>

            <!-- Wrapper for slides -->
            <div class="carousel-inner">
              <div class="item active">
                <img src="img/body/Vit-down_01.jpg" alt="Salón Vitrales" style="width:100%;">
              </div>
              <div class="item">
               <img src="img/body/Vit-down_02.jpg" alt="Salón Vitrales" style="width:100%;">
              </div>
              <div class="item">
                <img src="img/body/Vit-down_03.jpg" alt="Salón Vitrales" style="width:100%;">
              </div>
              <div class="item">
                <img src="img/body/Vit-down_04.jpg" alt="Salón Vitrales" style="width:100%;">
              </div>
              <div class="item">
                <img src="img/body/Vit-down_05.jpg" alt="Salón Vitrales" style="width:100%;">
              </div>
            </div>

            <!-- Left and right controls -->
            <a class="left carousel-control" href="#Car-down-vitrales" data-slide="prev">
              <span class="fas fa-angle-left"></span>
            </a>
            <a class="right carousel-control" href="#Car-down-vitrales" data-slide="next">
              <span class="fas fa-angle-right"></span>
            </a>
          </div>
        </div>        
      </div>
    </div>
    <footer>
      <div class="container">
        <div class="row">
          <div class="span3">
            <div class="widget">
              <h5 class="widgetheading">Contacto</h5>
              <address>
                <strong>Direccion </strong>
                <br>
                <br>
              </address>
              <p>
                Tel: (442) 101-9696 <br>
                [email protected]
              </p>
            </div>
          </div>
          <div class="span3">
            <div class="widget">
              <h5 class="widgetheading">Certificaciones</h5>
              <img src="img/footer/certificaciones-footer.jpg">
            </div>
          </div>
          <div class="span3">
            <div class="widget">
              <h5 class="widgetheading">Ofertas Especiales</h5>
                <a class="nav-link active" href="#">Ver mas ... </a>
            </div>
          </div>
          <div class="span3">
            <div class="widget">
              <h5 class="widgetheading">Bolsa de Trabajo</h5>
              <a href="#">[email protected]</a>
            </div>
          </div>
        </div>
      </div>
    </footer>
  </div>
  <a href="#" class="scrollup"><i class="icon-chevron-up icon-square icon-32 active"></i></a>



    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

Con bootstrap, por ejemplo, no es necesario usar otras librerías para obtener un carrusel

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="https://picsum.photos/1200/600">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://via.placeholder.com/1200x600">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://picsum.photos/1200/600">
    </div>>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://via.placeholder.com/1200x600">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

1
  • tuve un problema similar hacer unos meses con un modal y era lo que dice @DjCrazy, tenia conflictos con las demás librerías que incluía. Solo utiliza las de bootstrap y prueba asi. Saludos. el 5 mar. 2020 a las 17:55

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.