Building Sidebar Carousels with CSS by Hacking the Bootstrap Carousel

You don't have to 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.

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. ... https://www.youtube.com/watch?v=0-1aD5M40js