0

buenos dias estoy haciendo un proyecto con bootstrapy soy nuevo usándolo estoy tratando de crear un carrousel como se indica en la documentación pero no me funciona. Estoy buscando cual puede ser el motivo pero no lo encuentro agradecería de su colaboración

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <!-- <link href= "../css/bootstrap.css" rel="stylesheet" type="text/css" style="display:none;visibility:hidden"https://www.googletagmanager.com/ns.html?id=GTM-MWD3VXM"
height="0" width="0"></iframe></noscript>-->
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link href="../cssMipagina/pantilla.css" rel="stylesheet" type="text/css" style="display:none;visibility:hidden" https://www.googletagmanager.com/ns.html?id=GTM-MWD3VXM " height="0 " width="0 "></iframe></noscript>
<title>Red Distrital de Bibliotecas Públicas - Biblored</title>
</head>
<body>
<header> 
h</div>
</header>

<div class ="container ">
<div id="carouselExampleIndicators " class="carousel slide " data-ride="carousel ">
  <ol class="carousel-indicators ">
    <li data-target="#carouselExampleIndicators " data-slide-to="0 " class="active "></li>
    <li data-target="#carouselExampleIndicators " data-slide-to="1 "></li>
    <li data-target="#carouselExampleIndicators " data-slide-to="2 "></li>
  </ol>
  <div class="carousel-inner " role="listbox " >
    <div class="item active ">
      <img class="d-block w-100 " src="../recurso/50-regalos-de-la-internet-para-diseñadores9.jpg " alt=" ">
    </div>
    <div class="item ">
      <img class="d-block w-100 " src="../recurso/a.jpg " alt=" ">
    </div>
    <div class="item ">
      <img class="d-block w-100 " src="../recurso/descarga.jpg " alt=" ">
    </div>
  </div>
  <a class="left carousel-control-prev " href="#carouselExampleIndicators " 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-next " href="#carouselExampleIndicators " role="button " data-slide="next ">
    <span class="glyphicon glyphicon-chevron-right " aria-hidden="true "></span>
    <span class="sr-only ">Next</span>
  </a>
</div>

</div>





<script src="../js/jquery-3.2.1.slim.min.js "></script>
<script src="../js/popper.min.js "></script>
<script src="../js/bootstrap.min.js "></script>

<!--
<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>

el carrusel no arranca solo mostrando la primera imagen y no funciona los botones de siguiente o anterior

2
  • Exactamente cuál es el error?
    – user75901
    el 8 mar. 2018 a las 7:24
  • @AlfredoPaz que no arranca el carrusel solo muestra la primera imagen y los botones no funciona estoy guiándome del codigo que tiene bootrap en su documentcion el 8 mar. 2018 a las 7:28

2 respuestas 2

2

EL principal problema es que estás usando el css de Bootstrap3 y la librería javascrip de Bootstrap4, con lo que se genera un conflicto.

También tienes una etiqueta iframe mal cerrada en el head. Aquí tienes el código funcionando con Bootstrap4. Por supuesto no he podido insertar tu CSS.

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!-- Latest compiled and minified 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>Red Distrital de Bibliotecas Públicas - Biblored</title>
</head>
<body>
<header>
</header>
<div class ="container ">
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner" role="listbox">
            <div class="carousel-item active">
                <img class="d-block img-fluid" src="http://lorempixel.com/800/400" alt="First slide">
            </div>
            <div class="carousel-item">
                <img class="d-block img-fluid" src="http://lorempixel.com/800/400" alt="Second slide">
            </div>
            <div class="carousel-item">
                <img class="d-block img-fluid" src="http://lorempixel.com/800/400" alt="Third slide">
            </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>


<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
  • 1
    gracias soy nuevo utilizando bootrap y tendre mas cuidado con las versiones en la realización de mi proyecto el 8 mar. 2018 a las 20:29
0

Prueba con este que seguro funciona https://www.w3schools.com/bootstrap/bootstrap_carousel.asp

Dejo el código a falta de las fotos solo

<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="la.jpg" alt="Los Angeles">
  </div>

 <div class="item">
  <img src="chicago.jpg" alt="Chicago">
 </div>

 <div class="item">
  <img src="ny.jpg" alt="New York">
   </div>
</div>

 <!-- Left and right controls -->
 <a class="left carousel-control" href="#myCarousel" data-slide="prev">
     <span class="glyphicon glyphicon-chevron-left"></span>
  <span class="sr-only">Previous</span>
</a>
 <a class="right carousel-control" href="#myCarousel" data-slide="next">
  <span class="glyphicon glyphicon-chevron-right"></span>
  <span class="sr-only">Next</span>
</a>
</div>

Tu Respuesta

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

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