No More Static Posts! I Built an Accessible, High-Performance Carousel for DEV.to

Hey everyone! 👋

Like many of you, I love using visual storytelling in my technical content. On LinkedIn, I've been using image carousels to break down complex topics. They're engaging and make information so much more digestible!

But when I wanted to bring that same energy to my DEV.to posts, I hit a snag: native carousel support isn't really a thing here. Since DEV does support CodePen embeds, I decided to take matters into my own hands and build my own solution: a Dynamic Image Carousel!

I'm thrilled to share it with everyone. The best part? It's designed to be easily adapted for your own use! You can simply fork my Pen, change the image source, and you're good to go (with a few considerations, of course).

How to Use This Carousel in Your DEV.to Posts

Ready to add some visual flair to your articles? Here’s how to get started:

1. Prepare Your Images:
   • Create your series of images. For best results and a good square aspect ratio, I recommend a size of 900x900 pixels per image.
   • Name them sequentially: 1.png (or .jpg, .jpeg, .webp), 2.png, 3.png, and so on.
2. Host Your Images:
   • Upload your images to an image hosting service that provides direct URLs (ImageKit, AWS S3, even GitHub Pages if serving raw files, etc).
   • You'll need a common base URL for the folder where these sequentially named images are stored.

3. Fork & Configure on Codepen:

   • Go to my DEV Carousel Codepen and click the "Fork" button (usually in the bottom right of the editor view) to create your own copy.
   • In the JavaScript panel of your forked Pen, find and update the IMAGE_BASE_URL constant with the URL of your image folder:

     const IMAGE_BASE_URL =
       "https://your-hosting-service.com/your-image-folder/";
   

4. Test Your Fork:

   • Make sure your carousel loads your images correctly within your forked Codepen. Save your Pen.

5. Embed in DEV.to:

   • Once your forked Codepen is saved and working with your images, copy the URL of your Pen.
   • In your DEV.to markdown editor, use the Codepen Liquid tag like this, replacing the example URL with the URL of your forked Pen:

   {% codepen https://codepen.io/YOUR_USERNAME/pen/YOUR_PEN_SLUG_HASH %}
   

And voila! ✨

So, What's Under the Hood? (The Techy Bits)

For those interested in the mechanics, I focused on building this with vanilla JavaScript, HTML, and CSS, emphasizing:

• Dynamic Image Loading: It doesn't need a predefined list of image URLs. It discovers images by trying sequential numbers (1.png, 2.png, etc.) with various formats from your IMAGE_BASE_URL.
• Performance Optimizations:
  • Parallel Image Discovery: Uses Promise.all (with a Promise.race for timeout) to check for the existence of multiple potential images and their formats simultaneously, making the initial discovery faster.
  • Image Existence Caching: Once an image's existence (or non-existence) at a specific URL is confirmed, this status is cached in a Map to avoid redundant new Image() checks for the same URL during the discovery phase.
  • Intelligent Preloading: When you navigate, it attempts to preload the next and previous slides' images to make transitions feel smoother.
  • Uses CSS will-change for transform animations.
• Accessibility (WCAG 2.1 AA in mind):
  • Full keyboard navigation.
  • ARIA roles and attributes (aria-roledescription, aria-label, aria-selected, sr-only live region for slide changes).
  • Visible focus indicators and High Contrast Mode considerations in CSS.
• Responsive & Interactive:
  • Adapts to different screen sizes (CSS aspect-ratio with fallbacks).
  • Touch swipe and mouse drag support for navigation.
• Error Handling & Fallbacks:
  • Gracefully handles images that fail to load by showing a fallback SVG.
  • Includes a loading indicator during initial image discovery.
  • Provides a <noscript> message.

You can dive into the HTML, CSS, and JavaScript directly in the Codepen to see all the details!

What's Next?

I built this carousel because I wanted a better way to share visual stories here on DEV.to, and I hope it can be useful to some of you too!

If you found this interesting or use the carousel, I'd love to hear about it in the comments. Also, consider dropping a ❤️ on CodePen!

Be sure to follow me here on DEV.to! I'm planning to share more of my projects and insights on AI, web development, and building cool tools. Stay tuned for some interesting posts!

Happy coding! 👨‍💻