Jquery Framework and the slideshow Plugin
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} ); });
You might also like
Tags
accordion accordion menu animation navigation animation navigation menu carousel checkbox inputs css3 css3 menu css3 navigation date picker dialog drag drop drop down menu drop down navigation menu elastic navigation form form validation gallery glide navigation horizontal navigation menu hover effect image gallery image hover image lightbox image scroller image slideshow multi-level navigation menus rating select dependent select list slide image slider menu stylish form table tabs text effect text scroller tooltips tree menu vertical navigation menu