Why is my Bootstrap Carousel not working?

I am making a MEAN stack application using angular 7. I use a Bootstrap Carousel but it's not working.

#slider .item {
  height: 500px;
}

.carousel-caption {
  font-size: 18px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!--all above is necessary for bootstrap to function in this snippet-->


<div class="carousel slide" id="slider" data-ride="carousel">
  <!--indicators-->
  <ol class="carousel-indicators">
    <li data-target="#slider" data-slide-to="0" class="active"></li>
    <li data-target="#slider" data-slide-to="1"></li>
    <li data-target="#slider" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="item active">
      <img src="../../assets/public/RoadTipsMain.jpg" style="width: 100%">
      <div class="carousel-caption">
        <h4>Welcome</h4>
        <p>Travel! Enjoy!</p>
      </div>
    </div>

    <div class="item" id="slide2">
      <img src="../../assets/public/5.jpg" style="width: 100%">
      <div class="carousel-caption">
        <h4>Welcome</h4>
        <p>Travel! Enjoy!</p>
      </div>
    </div>

    <div class="item" id="slide3">
      <img src="../../assets/public/cardrive.jpg" style="width: 100%">
      <div class="carousel-caption">
        <h4>Welcome</h4>
        <p>Travel! Enjoy!</p>
      </div>
    </div>

  </div>
  <a class="left carousel-control" href="#slider" data-slide="prev" role="button"><span class="icon-prev"></span></a>
  <a class="right carousel-control" href="#slider" data-slide="next" role="button"><span class="icon-next"></span></a>
</div>

Is there any mistake I am doing with the code? I think #slider is not working in angular 7.

Solution

As I already explained here (marked as duplicate but nothing happened):

You have to give all items (pictures) of the carousel the class carousel-item but you only gave them the class item. Same with the Previous and Next buttons. The classes should be carousel-control-prev and carousel-control-next but you only gave them the class carousel-control.

The rest seems to be working just fine! When handling Bootstrap you always have to look out for the classes since they have to be exactly right for it to work at all. (You could also probably remove the popper.js-script at the bottom since it is not used at all.)

So basically just change all <div class="item"> to <div class="carousel-item"> and add -next and -prev to the control classes as I did here:

#slider .carousel-item {
  height: 500px;
}

.carousel-caption {
  font-size: 18px;
}

.carousel-item>img {
  width: 100%
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!--all above is necessary for bootstrap to function in this snippet-->



<div class="carousel slide" id="slider" data-ride="carousel">
  <!--indicators-->
  <ol class="carousel-indicators">
    <li data-target="#slider" data-slide-to="0" class="active"></li>
    <li data-target="#slider" data-slide-to="1"></li>
    <li data-target="#slider" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://picsum.photos/1000/600/">
      <div class="carousel-caption">
        <h4>Welcome</h4>
        <p>Travel! Enjoy!</p>
      </div>
    </div>

    <div class="carousel-item" id="slide2">
      <img src="https://picsum.photos/1000/600/">
      <div class="carousel-caption">
        <h4>Welcome</h4>
        <p>Travel! Enjoy!</p>
      </div>
    </div>

    <div class="carousel-item" id="slide3">
      <img src="https://picsum.photos/1000/600/">
      <div class="carousel-caption">
        <h4>Welcome</h4>
        <p>Travel! Enjoy!</p>
      </div>
    </div>

  </div>
  <a class="carousel-control-prev" href="#slider" 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="#slider" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>