This time I will share jQuery Plugin and tutorial about Responsive jQuery Content Slider With RTL Text Support – Glider, hope it will help you in programming stack.
Glider is a generic responsive content slider/carousel plugin for jQuery that features auto play, custom slider controls, infinite looping, auto resizing and LTR/RTL text support.
How to use it:
1. Load the stylesheet file glider.css
in the head
and the JavaScript file glider.js
at the end of the document.
1 |
< link rel = "stylesheet" href = "glider.css" > |
2 |
< script src = "//code.jquery.com/jquery-3.1.0.min.js" ></ script > |
3 |
< script src = "glider.js" ></ script > |
2. The basic HTML structure for the slider.
3. Enable the ‘Auto Play’ functionality on the slider.
1 |
< div class = "slide" data-glider-autoplay> |
4. Set the text direction of your slider.
1 |
< div class = "slide" dir = "rtl" data-glider-autoplay> |
5 |
< div class = "slide" dir = "ltr" data-glider-autoplay> |
5. Add built-in navigation & pagination controls to the slider.
3 |
data-glider-controls = "glider-top" |
4 |
data-glider-links = "glider-bottom" > |
6. Initialize the plugin and done.
7. Default plugin settings.
Changelog:
2019-09-05
2017-04-21
2017-02-07
- Fix for controllers position in multiple gliders on same page with different height.
2016-11-10
- Small refactor to stop glider when navigation button has been pressed
2016-09-23
- Hide next navigation earlier
- Only set height of controls in parent
- Handle containers with low height.
- Remove () from parent.
2016-09-17
- place controls outside glider (optional)
2016-09-06
2016-09-01
2016-08-31
- Added settings for next and back icons
2016-08-30
- Allows to show multiple slides at once
2016-08-29
- fixed the position of navigation arrows.
This awesome jQuery plugin is developed by Steve-Fenton. For more Advanced Usages, please check the demo page or visit the official website.