bbin电竞赛事

How to create a Pro Gallery with an infinite loop.

Open the editor to try it out →

Part 1: Set up the section.

1. Set the header to 15vh and the section to 85vh so the two combined are 100vh

2. Apply a 2X1 grid to the section

3. Go to Advanced mode and adjust the left grid column to 40%, and the right grid column to 60%

4. Adjust the row height to 85vh

5. Add content such as a title, text and button to the left side of the grid and set to stack

6. Center the content vertically

7. Dock it to the left and right with 10% margins, and to the top with a 55px margin

8. 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.

1. From the Add panel , under Media then Pro Galleries , drag the last slider gallery into the right grid column

2. The gallery will automatically stretch to fill the column. Click the icon in the top right corner to unstretch it

3. Set the width to 100%

4. Set the height to 85%

5. Dock the gallery to the left and right with margins of zero

6. Dock the gallery to the bottom with a 50px margin

7. With the Pro Gallery selected, go to settings from the floating action bar

8. From the Layout tab, choose Customize Layout

9. Under Slideshow Settings , turn on Loop

10. Also switch on Slide automatically , and change the slideshow to Continuous

11. Finally, switch it to Pause on hover

12. Under the Settings tab, change the setting for When clicking an item to Nothing happens

13. Turn off the Heart icon so it doesn’t display

14. Under the design tab, go to Navigation Arrows and switch them off

15. 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.

1. Click on the Content Manager icon and add it to the site. More on how to do that here

2. When setting up the content selection, we recommend adding each image as a different field to make it easier to manage

3. Select the Pro Gallery

4. From the floating action bar, select Connect to Data

5. Choose the dataset with the images you want to display

6. Connect the image source to the image field inside the dataset collection