Building Sidebar Carousels with CSS by Hacking the Bootstrap Carousel

Описание: You don't have to use a single carousel on a page, they work really well on sidebars to cycle through content, getting attention by using their sliding or fading features.

00:00 - Intro
00:20 - Carousel review
00:45 - Important classes
01:40 - Coding the sidebar
2:14 - Fitting and centering images
2:30 - Putting text underneath
2:40 - Fixing the arrows and indicators

This is Part Two of a three part series on Hacking the Bootstrap Carousel. This part focuses on CSS to convert the carousel from something that would work on the top of a website into a sidebar.

You could use columns to position the sidebar, but this way it will move with the content in the article. The images aren't the same proportions and therefore heights, so I'm going to use a trick that I covered when I wrote an article on building consistent height carousels.

Using object-fit and object-position with the overflow:hidden property, I can set the height of the image and make them proportionally the same size.

The problem is that the arrows indicators you can use to go to the previous and next image appear to be gone. They're still there, but since they're centered, they happen to be in the area with the text.

To fix these, we need to position them manually based on the size of our image.

This will place the image and the arrows in the proper place. You need to calculate these manually and make sure that you adjust the height and margin; otherwise they will run on top of the text, but it's not a big deal.

LInks in this video:

Part 1: CSS Gadients and Object Fit:    • Hacking the Bootstrap 5 Carousel: Consiste...  
Object Fit: https://developer.mozilla.org/en-US/d...
Object Position: https://developer.mozilla.org/en-US/d...
Article with all the code: https://raybo.org/posts/2021-03-28-ma...
Finished Codepen: https://codepen.io/planetoftheweb/pen...
Part 3: Automating Arrows and Indicators with JavaScript: https://raybo.org/posts/2021-03-29-au...