Build a blog carousel that belongs

No plugins. No patchwork. Just Swiper.js, your style, and a sprinkle of script.

Not everything native to your CMS feels native.

Take Squarespace.

Elegant templates, sure. But when it comes to embedding dynamic content, like a blog carousel, the default blocks are (not going to sugarcoat it) blocky.

So, I built my own carousel, one that sidestepped the functional, monetary and stylistic constraints in pursuit of a positively native look and feel.

And, to my delight, the result was more seamless than I expected.

What I used (and why it worked)

  • Swiper.js: The gold standard in modern sliders. Light, responsive and extendable.

  • rss2json.com: A free, no-login-needed API that converts any RSS feed into clean, easily-parsed JSON.

  • One code block: That’s all you need. Paste it in and style it up. It’s that simple.

The result?

A responsive, CMS-agnostic carousel that fetches your latest blog posts—thumbnail, headline, excerpt and date—and displays them cleanly across mobile, tablet and desktop.

It can be customized to end with a call-to-action: a button linking to a blog landing page.

Why I built my own

I’d been using Elfsight. It’s good but gets pricey fast.

Worse still, it about as well as a stock image in a personal album.

The Swiper-powered alternative? Code to joy. The style I soght, the copy I could own.
Typography, colors, padding: dialed into my brand. No guessing. Just a little fine tuning.

Now it lives natively on www.geoffmosher.me. And, TBH, it’s hard to tell it wasn’t built into Squarespace itself.

Want the code?

I published the full snippet on GitHub.

Fork it.

Adapt it.

Make it yours.

I hope it gives your blog the best first impression imaginable.

Next
Next

Applied AI in my work