With Modula Slider you will enable a new gallery type that 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. Click here to see a demo with Modula Slider. Each image from the slider can be opened in the lightbox if you choose to.
How can the extension be installed?
After you have bought Modula Slider (or if it came with a package), you will receive an account on the email address that is automatically generated on wp-modula.com.
With this account, you can easily log in to the Modula website, after which you can easily access: https://wp-modula.com/my-account/, click on View details and Download, and you will be redirected to a page with the Modula extensions that you can download with a single click.
If you are using the browser Safari on a Mac, when you download the zip file it extracts the file from the archive directly to your computer (you might only see the file folder with the plugin’s files in it, instead of the zip). If that is the case, then try and download the zip from your account using a different browser, or check your Trash, as the zip file should be there. To see how to prevent Safari from unzipping files please follow this tutorial.
How do I upload Modula Slider to the WordPress dashboard?
Go to the “Plugins” dashboard > Add New > Upload File > select Modula Slider archive > Install Now > Activate. You will see the Slider options when you go to Modula > edit a gallery > Gallery type > ‘Slider’.
If you need help uploading the extension to your WordPress site please follow this tutorial here. You will need to watch ‘Method 2: Upload Plugin‘ timestamp 1:24.
Below you can find each feature/option Modula Slider has, including a demo for each one. Just click on the feature’s name and it will take you to a demo page. Each feature is linked to a demo page.
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: 150×150. Crop: true
- Medium – Image Size: 300×300. Crop: false
- Large – Image Size: 1024×1024. 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. Even if set to 100% please keep in mind that the slider will take the full width of the container it’s in. If your page is full width, then the slider will also be full width.
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 works only for single slides. 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:
- 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 slide
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 %) – it will show more or less of the next and previous images.
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 and thumbnail navigation is on.
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. Simply enter the number of the image in the gallery. For example, if you want to start the slider with the 3rd image from your gallery enter the number 3.
18. Slide captions: Display image title and caption under the image.
