Background

I used to have another blog site on a wordpress like platform. One of my favorite features that the site had was an image carousel, where I could put a number of photos with captions. It made it really easy to share a collection of photos and add context to a post.

Now with this site, I am able to already put single images into posts in regular markdown format. This however does not satisfy what I want to do. Fortunately, with astro and .mdx file extension, I can place Astro components directly into these posts all while mostly keeping the syntax in markdown.

The End Result

This react component was made with Embla with some minor tailwinds styling. It still is not perfect but fits the minimum requirements like the infinite scrolling, buttons for next/prev, captions for the images, and different size image support.

To improve in the future would be the styling of the buttons, better support for vertical images, better layout for the captions, and ease of use when adding new photos and descriptions to a blog.