how to change the image of a carousel

Question

how to change the image of a carousel

Navigation

#1 by (2 votes)
#2 by (0 votes)

0

good morning I'm doing a project with bootstrap and I'm new using it I'm trying to create a carrousel as indicated in the documentation but it does not work for me. I am looking for what may be the reason but I do not find it I would appreciate your collaboration

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

the carousel does not start showing only the first image and the next or previous buttons do not work

html bootstrap

asked by esteban fabian patiño 08.03.2018 в 08:14

source

2 answers

0

Try this one that sure works link

I leave the code in the absence of the photos only

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

answered by 08.03.2018 в 09:02

Extract table data from one bbdd to another angular server

score 2 · Accepted Answer

The main problem is that you are using the css of Bootstrap3 and the javascrip library of Bootstrap4 , which generates a conflict.

You also have a iframe badly closed in head . Here is the code working with Bootstrap4 . Of course I could not insert your 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>