My carousel isnt scrolling, Ive tried everything! please help

HTML-CSS
1 
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bottstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
  <script src="https://use.fontawesome.com/release/v5.0.8/js/all.js"></script>
  <link rel = "stylesheet" href ="./css/style2.css"/>
  <title>Helpful Movers</title>
</head>

<div id="slides" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
  <li data-target="#slides" data-slide-to="0" class="active"></li>
  <li data-target="#slides" data-slide-to="1"></li>
  <li data-target="#slides" data-slide-to="2"></li>
  <li data-target="#slides" data-slide-to="3"></li>
  <li data-target="#slides" data-slide-to="4"></li>
</ul>
<div class="carousel-inner">
  <div class="carousel-item active">
    <img src="images/slideimage0.jpg">
    <div class="container-fluid" >
    <div class="carousel-caption">
      <div class="row">
        <div class="col-sm-7">
      <h1 class="display-2">AFFORDABLE AT IT'S BEST!</h1>
        </div>
        <div class="col-sm-1"></div>
      <div class="carousel-card">
      <div class="col-sm-8 col-md-4">
        <h3 class="carousel-caption">START YOUR FREE QUOTE BY:</h3>
      <button type="button" class="btn btn-vert">CALL 253.686.0108</button>
      <button type="button" class="btn btn-vert">ONLINE</button>
    </div>
    </div>
    </div>
    </div>
    </div>
  </div>
  <div class="carousel-item">
    <img src="images/slideimage2.jpg">
  </div>
  <div class="carousel-item">
    <img src="images/slideimage3.jpg">
  </div>
  <div class="carousel-item">
    <img src="images/slideimage4.jpg">
  </div>
  </div>
</div>
1 Like
2

Your carousel should work. Here a codepen example of your code above. I only replaced js files with the latest grabbed from here and placed them instead in the head at the bottom of the <body> and replaced the images links with some ones from pixabay.

1 Like
3

Hi sorinr, so i took a look at what you posted in code pen and it shows that it is working but for some reason it still doesnt scroll and the carousel indicators are not working when i click on them. Now i do have some media queries I am using in css to give me abit of control

@media (max-width: 768px){
  .carousel-caption{
    top:50%;

  }
  .display-2 h1{
    font-size:150%;
  }
  .carousel-caption h3{
    font-size:120%;
    font-weight:400;
    top: 30px;
    padding-bottom: .2rem;
  }
  .carousel-caption .btn{
    font-size: 95%;
    padding: 8px 14px;
  }
  .diplay-4{
    font-size: 200%;
  }
}
@media (max-width:576px){
  .carousel-caption{
    top:40%;

  }
  .display-2 h1{
    font-size:75%;
  }
  .carousel-caption h3{
    font-size:90%;
  }
  .carousel-caption .btn{
    font-size: 90%;
    padding: 4px 8px;
  }
  .diplay-4{
    font-size: 200%;
  }
  .carousel-indicators{
    display: none;
  }
  .display-4{
    font-size: 160%;
  }
}

/*--firefox bug fix --*/
.carousel-item {
transition: -webkit-transform 0.5s ease;
transition: transform 0.5s ease;
transition: transform 0.5s ease, -webkit-transform 0.5s ease;
-webkit-backface-visibility: visible;
backface-visibility: visible;
}

/*--fixed background image--*/
figure{
  position: relative;
  width: 100%;
  height: 60%;
  margin: 0!important;
}
.fixed-wrap{
  clip: rect(0, auto,auto,0);
  position: absolute;
  top:0;
  left:0
  width: 100%;
  height: 100%;
}