Tiny jQuery Image Slideshow with Animated Image Hover Effects - 56hm Rollslider

File Size: 1.69 MB
Views Total: 3372
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Tiny jQuery Image Slideshow with Animated Image Hover Effects - 56hm Rollslider

56hm Rollslider is a simple yet cross-browser and customizable jQuery image slideshow plugin that supports animated image caption hover effects.

How to use it:

1. Include the latest jQuery javascript library together with jQuery 56hm Rollslider's javascript and CSS in the html document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="56hmw.jquery.scrollslider.js"></script>

2. Create the Html for an image slideshow. Use title attribute in the a tag for the image caption.

<div class="scroll-slider">
<div class="inner">
<a href="#" title="Image Caption 1"><img src="images/1.jpg" /></a>
<a href="#" title="Image Caption 2"><img src="images/2.jpg" /></a>
<a href="#" title="Image Caption 3"><img src="images/3.jpg" /></a>

3. Enable and customize your image slideshow.


// enable the plugin

// auto play
autoplay: true,

// slide interval.
timeout: 5000, 

// slide speed
speed: 300,

// main container
slider: $('.scroll-slider'), 

// inner container
imageContainer: $('.scroll-slider .inner'), 

image: $(".scroll-slider .inner A"), 
// title bar options
titlebar : {


  speed: 300,
  layout: '<div class="titlebar"><div class="maskLayer"></div><div class="title"><a href="#">11111</a></div></div>',  
  titlebar: '.scroll-slider .titlebar',

  title : ".scroll-slider .titlebar .title A" 

// bottom navigation bar options
  enable: true,

  dynamic: false,
  speed: 300,

  layout : '<ul class="bottom"></ul>', 

  container : ".scroll-slider .bottom",  

  button: "li",  

  present: "present", 
  //left | center | right
  align: 'right'

Change log:

v1.0.0 (2014-03-14)

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