With Modula Slider you will enable a new gallery type which will allow you to display your gallery images in a slider format. The slider gallery provides a lot of configuration options in order to ensure you can achieve the best output for your scenario. The first set of configuration options will allow you to control the size of the slider and images.
1. Image size: select the image sizes for the slider from a selection of options. Select custom if you want to enter the sizes yourself. The options are:
- Thumbnail - Image Size: 150x150. Crop: true
- Medium - Image Size: 300x300. Crop: false
- Large - Image Size: 1024x1024. Crop: false
- Full - Uses the full image
- Custom - Add your own image size (Width & Height in pixels) > Image dimensions - adjust the width and height according to your needs. 'Image dimensions' appears only when you select 'Custom' as your image size. You can also enable Crop Images which will force images to match the sizes defined in Image Dimensions. If disabled, images will be resized to maintain their aspect ratio.
2. Gutter: use this slider to adjust the spacing of images in your slider.
3. Width : this controls the overall size of the slider.
4. Adaptive height : only available for single slide horizontal carousels, this will allow the height of the slides to be conditioned by the original image.
5. Thumbnail Navigator: toggling this on will enable thumbnail navigation for the slider. It will also activate settings specific to thumbnail navigation:
- Image size: select the image sizes for the thumbnail navigator from a selection of options. Select custom if you want to enter the sizes yourself. Options are:
- Custom - Add your own image size.
Slides to show: define the number of thumbnails shown in the navigator.
Gutter: define the distance you want between each thumbnail in your navigator.
Active border color: select the border color for the active thumbnail navigator slider
6. Autoplay: enables Autoplay for the slider.
- Autoplay speed : the time each slide will be displayed before moving to a different one;
- Pause on hover : this will stop the automatic switching of the displayed slide if the user hovers over the image.
7. Arrows: this will enable the arrow navigation functionality for your slider;
8. Dots: this will enable a second, dotted navigation under the slides;
9. Mouse dragging: this is the third navigation option available, you only need to drag the images to switch the displayed slide.
10. Center mode: this will display a small preview of the next and previous images. This option will only work if the 'Fade' option is disabled. Enabling this will also enable 'Center Padding' which you can use to add a side padding when in center mode (px or %).
11. Fade: if enabled, this will change the animation for changing slides to a fade effect. This option will only work if the number of slides to show is 1;
12. Infinite loop: once enabled, when the last slide is shown to the user, the slider will start over automatically, otherwise the slider will stop on the last slide.
13. Slides to show: you can control the number of slides that will be displayed at the same time in the slider;
14. Slides to scroll: when changing the displayed slide, this option will allow you to skip over a fixed number of slides;
15. Animation speed: the speed of your configured animation;
16. Right to left: if you have a RTL template, this option will align the slider functionality with your overall orientation;
17. Initial slide: here you can control the image your slider will start with.
18. Slide captions: Display image title and caption under the image.