How to add carousel to blog post

Community resources General
1

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!

2

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
3

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