General Settings
For each gallery variation you will create a new gallery style in “ProPhoto > Customizer > (toggle top-left switch to “Design”) > Galleries and give it a corresponding name. You want to to recognize the style by its name so this is called “Slider Gallery.”
In“Galleries > General Settings“.
- First select “standard” as the gallery style. Standard means that the gallery will be showing one image at a time.
- The position transition style results in a slider type effect.
- The transition speed is set to 680 milliseconds.
- Check the gallery height constraint to limit the height to which a gallery can grow to a percentage of the window height. The prevents having to scroll to view the entire image when the browser is wide.
- A good start is to set the height limit to 100%. That way the images will never require scrolling to see the whole thing.
- You will see the background color of the gallery when an image displays whose aspect ratio is such that it does not completely cover the gallery area. The first image in the gallery sets the gallery aspect ratio. Setting this to none makes it so only the image shows.
- Enable expanded mode so that the viewer can click an icon to see a larger version of the image.
In the Expanded Mode Settings box
- Choose to have the single images fill the screen. Play with the gallery on this page to see how that works. It will fill your screen (instead of just the browser window) with your gallery
- Select an icon for exiting expanded mode
- Choose the background color that will apply to any areas of your window not filled by the image. This gallery style uses a black background that has a partial opacity of 0.65. This makes it so you can still see the site underneath but it’s quite darkened.
Gallery Controls
The Gallery Controls area is where you dial in how the controls (play, pause, navigation, prev/next buttons) look and behave. You can mix and match these however you want. What this design does is laid out below.
- The control bar alignment is set to bottom.
- The controls position is set to overlay the gallery. This allows maximum space for the gallery.
- The fade in option for hiding/showing makes the control bar fade in when hovered. Try it in the gallery on this page.
- The control bar gets it’s own background color. Here it is set to #020202 and and opacity of 0.25. This makes for just a subtle background behind the control bar.
- The top/bottom padding option is set to 10px; which serves to add some more height to the background or the bar.
- The control button color is set to be white.
- A partial opacity of 0.5 on a black color gives a nice looking shadow so the buttons stand out.
In the Gallery Controls Sizes area choose how large the controls will be. Note that these sizes can be adjusted for each of the four breakpoint sizes. This allows you to dial in the size of the controls for different screen widths.
In Dot/Thumbnail Navigation Appearance setup the navigation options.
- This gallery has dot navigation enabled. That means there will be dots one can click on to navigate the images in expanded mode.
With dot navigation come some styling options.
- Size of dots = 25px
- Space between nav dots = 10px
- Dot shape – Square
The “prev/next navigation” area allows you to turn on icons for navigating images in expanded mode with a click/touch. When enabled, you get options for color and for the shadow. We use the same settings here as we did for the controls. White and a 0.5 opacity black. 
Below choose the icon type. The icon size is controlled in Gallery Controls Sizes.
In Slideshow Settings
- Slideshow mode is enabled. This means that your gallery will automatically start progressing through images.
- Choose the option to show the play/pause buttons to give control to the viewer.
- 3500 milliseconds is the length of time each slide will display when playing automatically. Adjust this to taste.
