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:
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?
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.
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.
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.
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>
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.
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.