Bootstrap carousel doesn't slide

Question

I absolutely do not understand why the bootstrap carousel code doesn't work at all with me. It's strange, i took the example which is on the bootstrap website, just customized some little things it should be work. I think it's a problem of version of bootrstrap or jquery but both of them are the last ones i found so i do not see where the problem come from. If anyone could help me, please ^^

#carouselReactions {
  margin-top: 25px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
  height: auto;
}

#carousel-left-control {
  width: 5%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#carousel-text {
  width: 50%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#carousel-text h3 {
    color: #0C0C0D;
}

.carousel-inner, .carousel-item {
  position: relative;
  text-align: center;
}

#carousel-right-control {
  width: 5%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.carousel-indicators {
  margin-top: 15px;
  padding: 0;
  float: none;
  position: relative;
}
.carousel-control-prev, .carousel-control-next {
  position: relative;
}
.carousel-control-next, .carousel-control-prev {
  width: 100%;
  height: 100%;
}
.carousel-control-prev-icon, .carousel-control-next-icon {
  height: 50%;
  width: 40%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div id="carouselReactions" class="carousel slide" data-ride="carousel">
  <div id="carousel-left-control">
    <a class="carousel-control-prev" href="#carouselReactions" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
  </div>
  <div id="carousel-text">
    <div class="carousel-inner">
      <div class="carousel-item active">
        <h3>« First quote »</h3>
        <img src="img/logo_quote1.png">
        <p>QuoteAuthor</p>
      </div>
      <div class="carousel-item">
        <h3>Second Quote</h3>
        <img src="img/logo_quote2.png">
        <p>QuoteAuthor2</p>
      </div>
      <div class="carousel-item">
        <h3>Third Quote</h3>
        <img src="img/logo_quote3.png">
        <p>QuoteAuthor3</p>
      </div>
    </div>
  </div>

  <div id="carousel-right-control">
    <a class="carousel-control-next" href="#carouselReactions" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

Answer 1

Just change your reference CDN's to below, then you must not have any issue again.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>