How to add carousel to blog post

Hi, I am working on a template I bought for blog. In one of the blog posts I was hoping to add an image carousel. I added a Container and put a Slider in it, added the images (only the first image actually shows in Preview), went to Publish it and the entire carousel/slider doesn’t show up although it does in the Editor.

I am guessing this is because I’ve edited the specific blog post in the editor by adding the carousel/slider, and not in the Blog Post Template?

What is the best way to add a slider in specific blog posts? Would it be to edit the Blog Post Template to add a slider/carousel, then use a Switch to turn that carousel On/Off? If I add the slider to the Blog Post Template with no images in it, would I be able to add images in the specific individual blog posts so they are separate images (not showing the same images on all blog posts)? Thanks!

Hi Ivan, you need to share your readonly project link, and published site link if you want help. Otherwise we can’t see anything regarding what you’re doing.

Let’s assume;

  • you have a CMS collection named “Blog”
  • In that collection you have an Image Gallery field, which you’ve named My Images allows up to 25 images.
  • On one blog posts, you have images, and on others you don’t

Then;

  • On the Blog collection page, you can create a gallery from that field using a collection list, and doing a bit of javascript using e.g. splidejs. It’s quite easy to setup. Or… use Finsweet’s CMS slider attributes if you want to use Webflow’s built-in slider with some mods.
  • Then, wrap that whole slider in a DIV, and mark it to show conditionally, only if My Images is set.

That’s pretty much it.

1 Like

Hi Michael. That sounds like a good way to go. Here is the read only link to that page. Slider is on the bottom although it’s a bit smaller than I want it now. Thanks!

https://preview.webflow.com/preview/ivans-spectacular-site-f87b38?utm_medium=preview_link&utm_source=designer&utm_content=ivans-spectacular-site-f87b38&preview=79b9feb100317fd83bb1aee365680189&pageId=63aab601cefc0ff267db4cb3&itemId=63aab601cefc0f68eadb4ce0&workflow=preview