jQuery Plugin To Generate Sliding Image Caption Overlays - Glider

File Size: 12.5 KB
Views Total: 1826
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
jQuery Plugin To Generate Sliding Image Caption Overlays - Glider

Glider is an ultra-lightweight jQuery plugin for generating a sliding caption overlay covering the image that toggles on mouse hover in and hover out.

Basic usage:

1. Add jQuery JavaScript library together with the jQuery glider plugin's JavaScript and CSS files into the html file.

<link href="jQuery-glider.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="jQuery-glider.js"></script>

2. Wrap your image with custom caption content into an element called 'glider'.

<div class="glider">
  <img src="1.jpg">
    More Description Here

3. Call the function on the image wrapper and done.


4. Add a custom sliding indicator to the caption overlay. In this case we use Font Awesome for the caret down icon.

  iconAfter: '<i class="fa fa-caret-down"></i>'

5. Change the default animation speed.

  speed: 250

Change log:


This awesome jQuery plugin is developed by davewoodhall. For more Advanced Usages, please check the demo page or visit the official website.