Submit your widget

Jquery Framework and the slideshow Plugin

Created 10 years ago   Views 51187   downloads 10863    Author hatuhn
Jquery Framework and the slideshow  Plugin
View DemoDownload 2.2 MB
253
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.

Features:

  • 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',
wapperSelector:'.lof-main-wapper',
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',
buttons:null,

Customization

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,
mainWidth:980,
buttons            : buttons} );    
});