(HTML/Carousel/Angular)

A properly working carousel has a single row of images. If the images exceed the width of the viewport, the overflow will drop off to the left or right but can be 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 I haven't gotten the font-awesome arrows to appear either. Here is 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.

Have you installed the associated CSS and JS files?

I have this in my angular.json file:

"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"node_modules/font-awesome/css/font-awesome.min.css"
],

I have a reference to the font-awesome 5.15.1 CDN in my index.html file, although I'm not sure it should go there.

I have the following CSS snippet in my CSS file:

.pics {
width: 200px;
height: 200px;
margin-bottom: 50px;
margin-top: 20px;

overflow: scroll;
}

Thanks. I added the overflow setting this morning but to no effect.

- Dale

[quote name='Dale Francis' date='Nov 19 2020, 08:29 AM' post='140515']
[quote name='Christian J' post='140511' date='Nov 18 2020, 10:21 AM']
Have you installed the associated CSS and JS files?
[/quote]

Here's an update on the associated CSS:

.pics {
width: 200px;
height: 150px;
}

.pics.active {
border-style: solid;
border-width: 5px;
}

img {
float: right;
}

.fa-angle-left {
float: left;
}

.fa-angle-right {
float: right;
}

.carousel-wrapper {
overflow: hidden;
}

.carousel-inner {
display: flex;
flex-direction: row;
}