Submit your widget

Jquery Framework and the slideshow Plugin

Created 13 years ago   Views 34319   downloads 7308    Author hatuhn
Jquery Framework and the slideshow  Plugin
View DemoDownload
Share |

Base on the Jquery Framework and the Easing Plugin, The JSiderNews Plugin is a slideshow plugin that displaying images or type of content and support favious navigation to previous|next items.


  • In the list sliders, Each item is HTML content
  • Use  arrows to next or prevour slider
  • Easy to Customize Navigation tabs dynamically (such us images of sliders, number of sliders) and items auto slide.
  • Auto-playing (optional feature, can start playing or stopped)
  • Allow indicate a item  via its index to display in first.
  • Support the wheelup and wheeldown to previous|next item in the list
  • Support preload images before play a slideshow

How does it work?

Usage & Options as default

direction: '', //support 2 directions: opacity and slide from right to left (as default)
mainItemSelector : 'li',
navInnerSelector : 'ul',
navSelector:  'li' ,
navigatorEvent: 'click',
mainWidth:600, // set width of slider
interval: 4000, // set time to play next slide
auto: true, // whether to automatic play the slideshow
maxItemDisplay: 3,
startItem: 0,
navPosition: 'vertical',
navigatorHeight: 100,//set height of navigator item (note: add padding of item)
navigatorWidth: 310,//set width of navigator item (note: add padding of item)
duration: 600,
navItemsSelector: '.lof-navigator li',
navOuterSelector: '.lof-navigator-outer' ,
isPreloaded: true,
easing: 'easeInOutQuad',


Use The lof  SiderNews to play a slideshow

$( ID ).lofSidernews( OPTIONS )

Example: with Demo 1

$(document).ready( function(){    
var buttons = { previous:$('#lofslidecontent45 .lof-previous') ,
next:$('#lofslidecontent45 .lof-next') };
$obj = $('#lofslidecontent45').lofSidernews( { interval : 4000,
direction        : 'opacitys',    
easing            : 'easeInOutExpo',
duration        : 1200,
auto             : false,
maxItemDisplay  : 4,
navPosition     : 'horizontal', // horizontal
navigatorHeight : 32,
navigatorWidth  : 80,
buttons            : buttons} );