Universal bootstrap slider with lazy load. Imagine you have 20 slides to give a demonstration of your project. Without lazy load, the whole page can significantly increase in size, which can slow down the page load dramatically. A user will be waiting untill all these images load. With lazy load you can have unlimited slide number of any size. 4 animation types available: classic slide effect, fade effect, flip effect, as well as mixed mode. Extended parallax effect allows to select image scale, animation depth and direction. Other options: multi-lingual HTML captions, responsive design, automatic image resizing and framing, full control over playback and styling.
Installation and usage
- Download the module.
- Install the package via Joomla! extension manager.
- Add new module in the module manager.
- Refer to tooltips in the module settings or this documentation to get the information on available options.
- Select the options you need and publish the module.
Getting support
Need help with installation or tuning of my extension, have technical issues/questions? Please, subscribe to the Lazy Slider PRO plan, and I will contact you in 24 hours. You can also contact me via the contact form.
Available options
- Maximum image height and width
- These settings determine maximum image width and height. Your images must fit the proportions. If you use automatic compression and framing, images will be cropped according to the proportions.
- Caption display min-width
- Minimum width of the slider in pixels when a caption is shown. If the slider width is less then this value, a caption is hidden. This option determines whether to display captions in mobile devices.
- Control elements display min-width
- Minimum width of the slider in pixels when the control elements is shown (nav. arrows, indicators, play/stop buttons). If the slider width is less then this value, the control elements is hidden. This option determines whether to display control elements in mobile devices.
- Animation type
- Four animation types: slide, fade, flip effects, and mixed mode.
- Auto playback
- Starts slide cycling on page load. If this option is disabled, slides can be only changed by using slider control elements or by swiping (touch screen devices)
- Cycling interval
- This option detirmines the pause in milliseconds between slide changing. Mimimum value is 1000 milliseconds (1 second).
- Playback pause on hover
- Pause when the mouse cursor is over the slider.
- Keyboard control
- Using keyboard left/right buttons to change slides.
- Lazy load
- Image are not loading immediately, they load right before slides change.
- Show loader
- When lazy load is enabled a tiny progress bar will be shown in the right bottom slidef corner while an image is loading.
- Display navigation arrows
- This option determines whether the navigation arrows are displayed.
- Display navigation indicators
- This option determines whether to display navigation indicators.
- Parallax effect
- Displacement or difference in the apparent position of an object viewed along two different lines of sight.
- Parallax direction
- Animation direction can be from top to bottom and from bottom to top.
- Parallax zoom
- Image zoom percentage. The larger scale, the more remarkable parallax effect. Select optimal zoom that corresponds to the image zooming ability without losing quality.
- Parallax depth
- Working height of parallax in percent. When the value is 100 (max), animation will run while the bottom border of the slider is in the viewport. If the value is less than 100, animation finishes when a user scrolls to the higher border of the slider height in percent. Decreasing the parallax depth is another way to speed up the animation without image zooming.
- Parallax min-width
- Minimum width of the slider in pixels when the parallax effect is enabled. This option determines whether to use parallax effect in mobile devices.
- Automatic compression and framing
This option enables automatic framing and resizing of images. If enabled, you do not have to think about manual image resizing, the slider will make your images lightweight and proportional. Just select images with highest quality, it does not matter how many megabytes they take. The slider will make several versions of an image: a version for a wide-screen desktop PC, a version for a tablet, and a smaller version for a mobile phone. A client will get an image that is more appropriate to the device. This can reduce page load time and increase the optimization rate for mobile devices.
- Processed image quality
- Value from 1 to 100. This setting determines the quality of jpg/jpeg and png images after framing and resizing. The value for png type is transformed to a value from 0 to 9 according the image type specification. Max value is 100, it stays 100 for jpg/jpeg type, and transformed to 0 for png type. It is not recommended to set a value more than 75, as it can unreasonably increase image weight.
- Browser cache lifetime
- The number of seconds, determines browser cache lifetime for a processed image.
- Display play/stop buttons
- This option determines whether the play/stop buttons are displayed.