Bootstrap Carousel not showing slides

Question

My Carousel is not showing the slides. It seems like I have a problem with the class .carousel because when I remove it the carousel works but not the indicators

I have another carousel working in other pages I cheked the css and there's nothing calling the class .carousel that could be interfering

Can you see what I Im missing here?

Here is the whole code.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>QTZ</title>

    <!-- CSS -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/navbar-fixed-side.css" rel="stylesheet">
    <link href="css/styles.css" rel="stylesheet">  
    <link href="css/font-awesome.css" rel="stylesheet">  

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style type="text/css">
.carousel-indicators {
    position: absolute;
    top: 22em !important;
    left: 50%;
    z-index: 15;
    width: 60%;
    padding-left: 0;
    margin-left: -30%;
    text-align: center;
    list-style: none;
  }
.carousel-indicators li {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin: 1px;
    text-indent: -999px;
    cursor: pointer;
    background-color: #000\9;
    background-color: rgba(0,0,0,0);
    border: 1px solid #fff;
    border-radius: 10px;
}

.carousel-indicators .active {
  width: 14px;
  height: 14px;
  margin: 1px;
  background-color: white;
}

.carousel .item>img {
    top: 0;
    left: 0;
    max-width: 100%;
}

.carousel-indicators li {
       box-shadow: 0px 0px 6px #000;
}

    </style>

  </head>
  <body>
    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-9 col-lg-10">

          <div class="row">  
                  <div id="myCarousel" class="carousel slide">
                   <!-- INDICADORES CAROUSEL -->
                   <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>
                    <li data-target="#myCarousel" data-slide-to="3"></li>
                   </ol>
                  <!-- SLIDES -->
                  <div class="carousel-inner" role="listbox">
                    <div class="item active">
                      <img src="images/murales2015-1.jpg" alt="" style="width:100%;">
                    </div>
                    <div class="item">
                      <img src="images/murales2015-2.jpg" alt="" style="width:100%;">
                    </div>
                    <div class="item">
                      <img src="images/murales2015-3.jpg" alt="" style="width:100%;">
                    </div>
                    <div class="item">
                      <img src="images/murales2015-4.jpg" alt="" style="width:100%;">
                    </div>
                  </div>
                </div>
          </div>

          </div>
         </div><!--fin contenido-->

      </div>

  </body>
<script>
$(document).ready(function(){
    // Activate Carousel
    $("#myCarousel").carousel({interval: 6000, pause: ""});

    // Enable Carousel Indicators
    $(".item1").click(function(){
        $("#myCarousel").carousel(0);
    });
    $(".item2").click(function(){
        $("#myCarousel").carousel(1);
    });
    $(".item3").click(function(){
        $("#myCarousel").carousel(2);
    });
    $(".item4").click(function(){
        $("#myCarousel").carousel(3);
    });

});
</script>
<script src="js/main.js"></script> <!-- Gem jQuery -->
<script src="js/bootstrap.min.js"></script>


</html>

Answer 1

Your click handlers for the indicator list items use class name selectors that are not defined in your HTML. Try adding those class names to the list items.

                <li data-target="#myCarousel" data-slide-to="0" class="item1 active"></li>
                <li data-target="#myCarousel" data-slide-to="1" class="item2"></li>
                <li data-target="#myCarousel" data-slide-to="2" class="item3"></li>
                <li data-target="#myCarousel" data-slide-to="3" class="item4"></li>

Answer 2

Looks like you were missing the classes on your indicators.

<!-- INDICADORES CAROUSEL -->
               <ol class="carousel-indicators">
                <li class="item1" data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li class="item2" data-target="#myCarousel" data-slide-to="1"></li>
                <li class="item3" data-target="#myCarousel" data-slide-to="2"></li>
                <li class="item4" data-target="#myCarousel" data-slide-to="3"></li>
               </ol>

See here for a working example, https://jsfiddle.net/qjg28j4s/

Bootstrap Carousel not showing slides

Question

2 answers

solution1
0 2016-12-08 19:50:52

solution2
0 ACCPTED 2016-12-08 20:02:03

Bootstrap Carousel not showing slides

Question

2 answers

solution1 0 2016-12-08 19:50:52

solution2 0 ACCPTED 2016-12-08 20:02:03

solution1
0 2016-12-08 19:50:52

solution2
0 ACCPTED 2016-12-08 20:02:03