Responsive jQuery Content Slider With RTL Text Support Glider - Free Download Responsive jQuery Content Slider With RTL Text Support - Glider

Free Download Responsive jQuery Content Slider With RTL Text Support – Glider

Posted on

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.

Responsive jQuery Content Slider With RTL Text Support Glider - Free Download Responsive jQuery Content Slider With RTL Text Support - Glider
File Size: 11 KB
Views Total: 8211
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.

1 <div class="slide">
2   <ul>
3     <li>Slide 1</li>
4     <li>Slide 2</li>
5     <li>Slide 3</li>
6     ...
7   </ul>
8 </div>

3. Enable the ‘Auto Play’ functionality on the slider.

1 <div class="slide" data-glider-autoplay>
2   ...
3 </div>

4. Set the text direction of your slider.

1 <div class="slide" dir="rtl" data-glider-autoplay>
2   ...
3 </div>
4  
5 <div class="slide" dir="ltr" data-glider-autoplay>
6   ...
7 </div>

5. Add built-in navigation & pagination controls to the slider.

1 <div class="slide"
2      data-glider-autoplay
3      data-glider-controls="glider-top"
4      data-glider-links="glider-bottom">
5   ...

6. Initialize the plugin and done.

1 $('.slide').glider();

7. Default plugin settings.

01 $('.slide').glider({
02  
03   // slider list
04   list: 'ul',
05  
06   // slider item
07   item: 'li',
08  
09   // animation type
10   animation: 'ease'
11  
12   // next/prev icons
13   nextIcon: '&gt;',
14   backIcon: '&lt;'
15    
16 }); 

Changelog:

2019-09-05

  • Bugfix

2017-04-21

  • CSS fixed for Safari.

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.

source : jquery.net