Guide
- How-to
- CMS gallery
Guide
- How-to
- CMS gallery
Guide
- How-to
- CMS gallery
How to Create a CMS Gallery Slideshow in Framer
Learn how to build a CMS image gallery in Framer, complete with a dynamic slideshow that starts from the clicked image. This step-by-step guide covers setting up the CMS gallery, displaying images, creating an overlay, and linking the slideshow to the CMS order field for a seamless user experience.
Posted by
Nandi
Table of contents
Setting up the CMS collection
The first step is to create a CMS collection that stores the images. Here’s how:
Open the CMS panel in Framer.
Create a new collection and name it gallery.
Add an Image field to store each image.
Make sure each item gets a unique number: 1 for the first image, 2 for the second, and so on.
Setting up the CMS collection
The first step is to create a CMS collection that stores the images. Here’s how:
Open the CMS panel in Framer.
Create a new collection and name it gallery.
Add an Image field to store each image.
Make sure each item gets a unique number: 1 for the first image, 2 for the second, and so on.
Setting up the CMS collection
The first step is to create a CMS collection that stores the images. Here’s how:
Open the CMS panel in Framer.
Create a new collection and name it gallery.
Add an Image field to store each image.
Make sure each item gets a unique number: 1 for the first image, 2 for the second, and so on.
Each image has it's order number.
Each image has it's order number.
Each image has it's order number.
Displaying the images on the canvas
Next, we’ll display the images dynamically:
Open the insert menu, drag a collection list onto the canvas.
Connect it to the gallery CMS collection.
Inside the list, insert an image frame.
Set the image source to the CMS Image field.
Now, all the images from the CMS collection will appear on the canvas.
Creating the overlay for the slideshow
To open an image in an overlay when clicked:
Convert the image component inside the collection list into a component.
In the right panel, enable overlay.
Inside the overlay, insert a slideshow component that will display the images.
At this stage, clicking an image will open the overlay, but the slideshow will always start with the same image. Let's fix that next.
Displaying the images on the canvas
Next, we’ll display the images dynamically:
Open the insert menu, drag a collection list onto the canvas.
Connect it to the gallery CMS collection.
Inside the list, insert an image frame.
Set the image source to the CMS Image field.
Now, all the images from the CMS collection will appear on the canvas.
Creating the overlay for the slideshow
To open an image in an overlay when clicked:
Convert the image component inside the collection list into a component.
In the right panel, enable overlay.
Inside the overlay, insert a slideshow component that will display the images.
At this stage, clicking an image will open the overlay, but the slideshow will always start with the same image. Let's fix that next.
Displaying the images on the canvas
Next, we’ll display the images dynamically:
Open the insert menu, drag a collection list onto the canvas.
Connect it to the gallery CMS collection.
Inside the list, insert an image frame.
Set the image source to the CMS Image field.
Now, all the images from the CMS collection will appear on the canvas.
Creating the overlay for the slideshow
To open an image in an overlay when clicked:
Convert the image component inside the collection list into a component.
In the right panel, enable overlay.
Inside the overlay, insert a slideshow component that will display the images.
At this stage, clicking an image will open the overlay, but the slideshow will always start with the same image. Let's fix that next.
Overlay once clicked.
Overlay once clicked.
Overlay once clicked.
Making the slideshow start from the clicked image
Here’s the trick: we use the order field from the CMS to control the slideshow’s current property.
Inside the overlay, add another Collection List (just like in Step 2).
Set the Limit to 1, so only one image is displayed at a time.
Duplicate this collection list and use start offset to adjust which image appears in each slide.
Select the slideshow component and locate its current property.
Link the current property to the order field from the CMS.
Now, when an image is clicked, the slideshow will open starting from that specific image. You can then cycle through the images in order!
Making the slideshow start from the clicked image
Here’s the trick: we use the order field from the CMS to control the slideshow’s current property.
Inside the overlay, add another Collection List (just like in Step 2).
Set the Limit to 1, so only one image is displayed at a time.
Duplicate this collection list and use start offset to adjust which image appears in each slide.
Select the slideshow component and locate its current property.
Link the current property to the order field from the CMS.
Now, when an image is clicked, the slideshow will open starting from that specific image. You can then cycle through the images in order!
Making the slideshow start from the clicked image
Here’s the trick: we use the order field from the CMS to control the slideshow’s current property.
Inside the overlay, add another Collection List (just like in Step 2).
Set the Limit to 1, so only one image is displayed at a time.
Duplicate this collection list and use start offset to adjust which image appears in each slide.
Select the slideshow component and locate its current property.
Link the current property to the order field from the CMS.
Now, when an image is clicked, the slideshow will open starting from that specific image. You can then cycle through the images in order!
CMS gallery in action.
CMS gallery in action.
CMS gallery in action.
Wrapping up
By using a simple order field in the CMS and linking it to the slideshow’s current property, you can create a dynamic gallery that opens overlays and allows users to smoothly browse through images. This setup ensures that the slideshow always starts from the selected image, making for a seamless experience.
Feel free to watch my detailed tutorial if you want to dig deeper.
Try this in your next Framer project and let me know how it goes!
Wrapping up
By using a simple order field in the CMS and linking it to the slideshow’s current property, you can create a dynamic gallery that opens overlays and allows users to smoothly browse through images. This setup ensures that the slideshow always starts from the selected image, making for a seamless experience.
Feel free to watch my detailed tutorial if you want to dig deeper.
Try this in your next Framer project and let me know how it goes!
Wrapping up
By using a simple order field in the CMS and linking it to the slideshow’s current property, you can create a dynamic gallery that opens overlays and allows users to smoothly browse through images. This setup ensures that the slideshow always starts from the selected image, making for a seamless experience.
Feel free to watch my detailed tutorial if you want to dig deeper.
Try this in your next Framer project and let me know how it goes!
