How to make a gallery that plays on infinite loop
Follow along with Maya as she explains how to create a design using a slider Pro Gallery to display images that slide and loop automatically. You’ll also learn how to link the Pro Gallery to a content collection to easily update the images without affecting the design.
What do you think about the course so far?
Thank you for your feedback!
Explore more topics
.png){kind=avatar}
How to create a Pro Gallery with an infinite loop
Part 1: Set up the section.
Set the header to 15vh and the section to 85vh so the two combined are 100vh
Apply a 2X1 grid to the section
Go to Advanced mode and adjust the left grid column to 40%, and the right grid column to 60%
Adjust the row height to 85vh
Add content such as a title, text and button to the left side of the grid and set to stack
Center the content vertically
Dock it to the left and right with 10% margins, and to the top with a 55px margin
Add an arrow basic shape to the left side of the grid. You can find arrows in the Add panel under Decorative, then Arrows
Part 2: Add and adjust the Pro Gallery.
From the Add panel, under Media then Pro Galleries, drag the last slider gallery into the right grid column
The gallery will automatically stretch to fill the column. Click the icon in the top right corner to unstretch it
Set the width to 100%
Set the height to 85%
Dock the gallery to the left and right with margins of zero
Dock the gallery to the bottom with a 50px margin
With the Pro Gallery selected, go to settings from the floating action bar
From the Layout tab, choose Customize Layout
Under Slideshow Settings, turn on Loop
Also switch on Slide automatically, and change the slideshow to Continuous
Finally, switch it to Pause on hover
Under the Settings tab, change the setting for When clicking an item to Nothing happens
Turn off the Heart icon so it doesn’t display
Under the design tab, go to Navigation Arrows and switch them off
Drag the arrow basic shape to align with the bottom of the gallery. Dock it to the right and bottom
Part 3: Change layout for tablet and mobile breakpoints.
1. At the tablet breakpoint, edit the grid so the left column in 60% and the right column is 40%
2. Move to the mobile breakpoint
3. Adjust the grid layout from 2X1 to 1X2
Note: When we make this change, we will need to adjust the Pro Gallery settings. From the Inspector panel, make sure it’s still located in the bottom grid cell.
4. Change the height of the Pro Gallery to 85vh
Part 4: Connect to the Content Manager.
Click on the Content Manager icon and add it to the site. More on how to do that here
When setting up the content selection, we recommend adding each image as a different field to make it easier to manage
Select the Pro Gallery
From the floating action bar, select Connect to Data
Choose the dataset with the images you want to display
Connect the image source to the image field inside the dataset collection
