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!