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>
</div>
</div>

3. Enable and customize your image slideshow.

<script>
jQuery(function(){
$(".scroll-slider").jscrollslider({

// enable the plugin
enable:true,

// 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 : {

  enable:true,
  
  dynamic:true,

  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
bottom:{
  
  enable: true,

  dynamic: false,
  
  speed: 300,

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

  container : ".scroll-slider .bottom",  

  button: "li",  

  present: "present", 
  
  //left | center | right
  align: 'right'
})
})
</script>

Change log:

v1.0.0 (2014-03-14)

• update.

---

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