HTML - Carousel not working needless to say!!!

[akashr 0]

A properly working carousel features a single row of images. If the pictures exceed the width of the viewport, the overflow will drop off to the left or right but are often accessed with left/right arrow keys. My carousel attempt isn't working properly. The overflow in my case drops down on the page creating one or more additional rows. and that i haven't gotten the Front End Development awesome arrows to seem either. Here is that the code:

<!-- carousel here! -->
<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]="#/assets/{{images[0]}}" alt="Cats Pic"> -->
<!-- <img class="pics" src="#/assets/Monaco-and-Spirit.jpeg"> -->
<img class="pics" src="assets/Monaco-and-Spirit.jpeg">
<img class="pics" src="assets/Monaco-and-Spirit2.jpeg">
<img class="pics" src="assets/Monaco-and-Spirit3.jpeg">
</div>

<!-- Left and right controls -->
<!-- use font-awesome -->

<!-- <fa-icon [icon]="filmIcon"></fa-icon> -->
<fa-icon [icon] = angleLeft></fa-icon>
<!-- <i class="fa fa-icon"></i> -->

<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<!-- <span class="angles angleLeft"></span> -->
<i class="fas fa-icon"></i>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="angles angleRight" alt="" width="40" height="40"></span>
<span class="sr-only">Next</span>
</a>
</div>

Can someone address one or both of the issues described above? Thank you.