Responsive jQuery Content Slider With RTL Text Support - Glider

Responsive jQuery Content Slider With RTL Text Support - Glider
File Size: 1.17 MB
Views Total:
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.

<link rel="stylesheet" href="glider.css">
<script src="//"></script>
<script src="glider.js"></script>

2. The basic HTML structure for the slider.

<div class="slide">
    <li>Slide 1</li>
    <li>Slide 2</li>
    <li>Slide 3</li>

3. Enable the 'Auto Play' functionality on the slider.

<div class="slide" data-glider-autoplay>

4. Set the text direction of your slider.

<div class="slide" dir="rtl" data-glider-autoplay>

<div class="slide" dir="ltr" data-glider-autoplay>

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

<div class="slide" 

6. Initialize the plugin and done.


7. Default plugin settings.


  // slider list
  list: 'ul',

  // slider item
  item: 'li',

  // animation type
  animation: 'ease'

  // next/prev icons
  nextIcon: '&gt;',
  backIcon: '&lt;'

Change log:


  • CSS fixed for Safari.


  • Fix for controllers position in multiple gliders on same page with different height. 


  • Small refactor to stop glider when navigation button has been pressed


  • Hide next navigation earlier
  • Only set height of controls in parent
  • Handle containers with low height.
  • Remove () from parent.


  • place controls outside glider (optional)




  • Added settings for next and back icons


  • Allows to show multiple slides at once


  • 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.