Carousel not working as expected

I’m attempting to include a carousel, but it isn’t working as expected. The expectation is that when the images exceed the width of the viewport then the images drop off to the left or the right and one uses left and right arrows to bring a different set of images into focus.

In my case this doesn’t happen. If the images exceed the width of the viewport the overflow drops down on the page to form a new row. 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 fontawsome -->

                     <!-- <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 this? Thank you. (Note the use of font-awesome to deal with the arrows.)

Hi

Can you share the css as well (maybe even create a codepen)? You will likely have to check the overflow property.

Cheers
Tom

Thanks Tom,

I’ve added the overflow property using scroll and hidden as parameters. But the results remain the same. Here is the CSS snippet:

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

    overflow: scroll;
}
  • Dale

Hi Dale

You haven’t shared all css, so it is a bit of a guessing game where it goes wrong. But I believe you may want to have a look at Flexbox, and more precisely flex-direction: column.

Also double check where you want the scrollbar. You have a div and inside that div you have images. You are now saying you want all images to have a scrollbar, but is that really what you want?

Cheers
Tom

Tom,

Actually I no longer want the scrollbar. The items:

  display: flex;
  flex-direction: row;

could have merit, and I will explore these further. My only concern is that Carousel is a bootstrap plugin and I haven’t seen flex in their documentation.

  • Dale

Hi Dale

This is actually really important information which was unclear based on the code you provided. That is why I asked for a link to codepen (or similar), or at least to share all relevant HTML/CSS/JS.

Unless you are using a really old version of Bootstrap, or if you did not import everything, flexbox is used: https://getbootstrap.com/docs/4.5/utilities/flex/#direction.

If you need further assistance, can you please share your code so that we can see what is going on and what you have already?

Cheers
Tom

Hello Tom,

The html is above. Here is a more complete CSS listing:

 .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;
}

HTML:
class=“item” is now class=“pics”

Please provide a working demo as was asked for. We do not know what Bootstrap plugin you are using nor what version of Bootstrap you are using.

You can use something like CodePen (or JSFiddle which allows for anonymous fiddles without login).


I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

Although I was never asked for a working demo, you are certainly welcome to it. I can provide a zipped project folder along with all the folders below it. To what email address should I send this zip file?

I’ll share your findings with the freeCodeCamp community.

(I am also not adverse to posting code on JSFiddle but this would not come close to a “working demo” as is now being requested.)

I believe I’ve installed bootstrap@4.4.1.

If you can help me with the problem with the carousel, I then have a problem with images displaying error 404. I think it has something to do with the page displaying before the images are resolved… but I have been unable to find a solution. (ref: cats.component.html, the carousel, and the NOT WORKING comment.)

BTW, Lasse or Tom, how are you related? Do you both work for Bootstrap or for freeCodeCamp perhaps?

Thank you for your help.

Dale Francis
<email redacted for privacy protection>

Hi Dale

Thank you for the additional CSS, can you confirm this is what you see (with different images)?

If not, that would indicate we do not have all the necessary CSS/HTML. If so, could you please upload all relevant HTML/CSS to codepen/JSFiddle/GitHub/GitLab (whichever you prefer) and share it with us? You can anonymize the data if you like and/or strip everything until there is nothing left except for the issue. Sending an attachment by email is not something I like due to privacy/security and it would not be possible for others to see the original issue.
If it is what you see, can you explain the issue again please?

I do not work for Twitter/Bootstrap or FCC. I try to give back to the Web community by answering questions during my free time.

Cheers
Tom

Thanks Tom. This thread is getting sloppy so I will close it here and open a new issue of a similar name pointing to a JSFiddle post. You will have the most relevant HTML/CSS/.ts code in one place but it will not be a working demo.