Creating dynamic carousel slides

  1. Drag and drop a carousel block onto your page
  2. Select the carousel layer and navigate to the options tab
  3. Click “show advanced” and select “show children for slides”

  1. Add a box block inside of the carousel block (to avoid running into any issues, drag and drop the box block below the carousel layer in the layers tab). Add any content needed into the box block (e.g. text, images)

  1. Navigate to the data tab and select “+ new data source” in the api data section
  2. Name your data source and paste in your URL (make sure it is CORS enabled)

  1. Now, you can use the element data bindings section in the data tab to bind your images, text, etc to your data source.

What about the data source? Where can I find the URL I’m supposed to paste on step 6? Am I supposed to create a new Section before all this?

Hi @mala,

Where are you wanting to pull data in from? When you say create a new section, are you referring to creating a new section model?

I want to pull the data from Shopify. I want Product Images in my Product Boxes to be able to slide manually to the right (or automatically change images) and see all the images available for each product.

What URL am I supposed to add to the API data source to do this?

Also, how can I get Product Image boxes to show my vertical product images without fitting them into a square box and making them smaller?

@mala Thanks for those details! If you’re wanting to display product images inside of a product box, you don’t need to connect an API data source. Instead, follow steps 1-4 (with the carousel within your product box). Then, select your image you added within the carousel and navigate to the data tab. In the Repeat for each section, paste in state.productInfo.images. Lastly, add a new binding to the image block to get Image from return state.imagesItem.src;.

Once you have your product images inside of the carousel, you can select the carousel layer and turn autoplay on in the options tab so the images rotate.

Your images likely have an aspect ratio applied in the show advanced section of the options tab, you can change the aspect ratio to 0 to not force the image to maintain it’s aspect ratio. You can also play around with the background size and position. Let me know if this gives the desired outcome!

Hi there! I’d like to have a product carousel for each product on a collection page. I have tried the above suggested solve but it appears to be for a single product page. Guidance would greatly be appreciated!

Hi @holli, can you share the builder content link where you are trying to implement this?

Sure - I hope this link is helpful… #WFH Life | Knack

Please let me know if you need a different way to locate my work.

1 Like

Hi @holli, I went ahead and added a quick example for you on that page. I didn’t publish though so these changes aren’t live.

It looked like you were repeating the carousel for each product, but instead you will want to repeat each product inside the carousel.

That’s cool but not quite the effect I am going for. I would like for each product in an entire collection to have an option to scroll through the alternate images for those products. I can’t find an example of this and I imagine the finished look might not be quite what I am envisioning in my head but would like to see it so I can at least write it off as an option if it is possible, of course :slight_smile:

Hi @holli, thank you for clarifying! I added an example of this to this page for you. I created this by adding a new collection block from the insert tab, adding a new carousel inside the repeating product box, set the carousel to use children for slides, and added a new box inside the carousel. I set the box to repeat for each state.productInfo.images and then added an image and an element binding to bind the image to the state.imagesItem.src.

1 Like

AMAZING! That is exactly what I wanted. Thank you so much, @sarah ! I am literally giddy! Thank you :slight_smile:

1 Like

One more question - how would you recommend I link the carousel images to the PDP (but not the left/right arrows)?

You can link the image to the product page by adding a new element binding to the image in the data tab so that you get the Link URL from the code below:

return "" + state.productInfo.handle

Make sure to replace the Shopify store url with your store.

1 Like

Hi @sarah - do you have any clever ideas as to how I could get the carousel to return to the first image? :smiling_face_with_three_hearts:

Here’s the link to my latest version: Best Gift Boxes Between $50 - $100 | Knack

Hi @holli, it looks great! Do you want to add a new button to do this? If not, can you share more detail about what you would like to trigger that?

I was thinking maybe on mouseLeave of the Carousel layer it can return to the first image or I’m not sure if it is possible to add a 5-10 second delay in that action?

You can add an on-mouse-leave event to the carousel and use a setTimeout function to do this, but you will have to use some custom code in that function to make the carousel go back to the first slide.

1 Like

Hi again! Now I’d like a bit of a different collection carousel that acts like a horizontal scroller and shows 4 products on each slide. I can’t seem to get the settings to pick up what I want it to do. Can you help? Unique Bar & Wine Gifts | Home Bar Accessories & Supplies | Wine Gifts | Knack

Hi @holli, you can find a great short video that shows how to do this here: Loom | Free Screen & Video Recording Software

1 Like