Help - Search - Members - Calendar
Full Version: HTML - Carousel not working as expected
HTMLHelp Forums > Web Authoring > Markup (HTML, XHTML, XML)
Dale Francis

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>

<!-- 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">

<!-- 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 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>

Can someone address one or both of the issues described above? Thank you.
Christian J
Have you installed the associated CSS and JS files?
Dale Francis
QUOTE(Christian J @ Nov 18 2020, 10:21 AM) *

Have you installed the associated CSS and JS files?

I have this in my angular.json file:

"styles": [

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
Dale Francis
[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?

Here's an update on the associated CSS:

.pics {
width: 200px;
height: 150px;
} {
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;

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2021 Invision Power Services, Inc.