If you ever wanted to show multiple slides at the same time, or maybe add videos to the image slider as well, we gotcha 😎
In Semplice 6 you can now adjust your slide width and height, gutters between slides, add use self-hosted MP4 videos. In this article you will learn how the new features work in "Gallery Slider".
New Layout Options
In Semplice 6 you can find a few new layout options. Here they are:
1. Slide Width
The Slide Width setting controls the width of your slides, and has the following choices:
Grid Width - your slides will have the width of the grid so you will only see one active image in your slider.
Image Width - your slides will have the width of your images so all of your slides will get displayed side by side and you can see the next and previous images. (unless your image size exceeds the slide width)
Custom Width - define your custom slide width in %.
2. Image Width
Slide width - this will scale your images to the width of your slide. (which you can change above)
Max Width - define a maximum width of your image in %. Your image will never exceed that width.
Original - display your images at it's original size (unless they are bigger than the slide) and horizontally centered.
3. Image Height
Auto - means that the height of your images is gets set automatically based on the width and ratio of your image.
Maximum Height - set a maximum height in % of your viewport. Your image will never exceed that maximum height. Don't forget to also set the image width otherwise images could get cropped.
4. Image Spacing
The Image Spacing option only takes effect if "Slide Width" is set to "Image Width" or "Custom".
5. Image Alignment
Define the vertical alignment of your images. Will only take effect if your images do not share the same height.
Configuration Examples
Next/Previous Slide Previews
Use the following settings to achieve this result:
- Set "Animations" > "On", and "Type" > "Slide"
- Set "Slide Width" > "Custom", then "Custom Width" to 50
- Set "Image Width" > "Slide Width"
- Set "Image Height" > "Auto"
- Set "Image Spacing" to 30, then "Image Alignment" > "Center"
Varying Aspect Ratios
Use the following settings to achieve this result:
- Set "Animations" > "On", and "Type" > "Slide"
- Set "Slide Width" > "Custom", then "Custom Width" to 50
- Set "Image Width" > "Original"
- Set "Image Height" > "Set Maximum Height", then "Image Max Height" to 70
- Set "Image Spacing" to 50, then "Image Alignment" > "Center"
Please note, that images larger than your screen size will stretch to fit your screen. So to get this right, save your images the same width and height you would like to see them on screen. The example above uses 700x380px landscape images, and 380x530px portrait images.
Mixed video and image content
Now you can add your self-hosted videos to the image slider. While choosing images in the media library, select your MP4 video and you are good to go! Please note, due to the nature of module videos will be auto-played without sound.
Troubleshooting
Only one slide is visible at the same time
If you are using a "Custom" slide width to show multiple slides at the same time, make sure that "Animation" is set to "On", and "Type" to "Slide".
Why can't I display videos with controls or sound
Gallery Slider is an interactive module that relies on user interaction to navigate between slides. That's why any video controls will contradict this behavior.