The OneByOne Slider is a lightweight, responsive & layered jQuery plugin

LIVE DEMO

The OneByOne Slider is a lightweight, responsive & layered jQuery plugin you can use to display your image and text one by one. The CSS3 animation is driven by Animate.css. It’s mobile friendly, which support wipe left/right on your touch device like iPhone & iPad. You can drag and drop to navigate with your mouse too. The latest update add an extra example, which make Twitter Bootstrap Carousel support the one by one animation.

Features:

• CSS3 driven animation, hardware accelerated CSS3 transitions for supported modern browser.
• Responsive support, example included.
• Mobile friendly, you can use it in a touch device.
• It’s lightweight, the compressed javascript is only 4kb.
• Optional auto delay slideshow, optional hove to pause the slideshow.
• Each slide or element’s animation can be customized.
• Optional drag function of mouse.
• Optional animation style, can be in random or any other type.
• Optional arrow and buttons.
• FAQ is included in the source package.
• Free update, you can download the future update for free.

About the CSS3 transition

Note: The CSS3 transition only works in the modern browser like Firefox, Safar and Chrome. Which doesn’t work in IE7, 8 & 9, it seems the IE 10 will support it.

For jQuery 1.8.0 user

It seems there is a bug with jQuery 1.8.0, please download the Uncompressed version of jQuery and comment line 4521, then this plugin will work fine.

// throw new Error( "Syntax error, unrecognized expression: " + msg );

Available plugin settings

// the wrapper's name        
className: 'oneByOne', 
// the wrapper div's class name of each slider        
sliderClassName: 'oneByOne_item',  
// pause the auto delay slideshow when user hover                    
pauseByHover: true, 
// the global ease animation style, 
// take effect if you don't pre-defined it in the element
easeType: 'fadeInLeft', 
// width of the slider        
width: 960,  
// height of the slider        
height: 420, 
// the delay of the touch/drag tween        
delay: 300,  
// the tolerance of the touch/drag          
tolerance: 0.25, 
// enable or disable the drag function by mouse        
enableDrag: true, 
// display the previous/next arrow or not         
showArrow: true,  
// auto hide the arrows when user leave the slider or not
autoHideButton: true,
// display the circle buttons or not        
showButton: true,  
// auto play the slider or not        
slideShow: false,  
// the delay millisecond of the slidershow        
slideShowDelay: 3000, 
// set responsive to true, when you'll change the 
// slider's size with the media query in CSS        
responsive: true
// when slider is smaller than minWidth, 
// the text are be hidden in the responsive            
minWidth: 480

Available easeType

‘fadeIn’, ‘fadeInUp’, ‘fadeInDown’, ‘fadeInLeft’, ‘fadeInRight’, ‘fadeInRight’, ‘bounceIn’, ‘bounceInDown’, ‘bounceInUp’, ‘bounceInLeft’, ‘bounceInRight’, ‘rotateIn’, ‘rotateInDownLeft’, ‘rotateInDownRight’, ‘rotateInUpLeft’, ‘rotateInUpRight’, ‘fadeInLeftBig’, ‘fadeInRightBig’, ‘fadeInUpBig’, ‘fadeInDownBig’, ‘flipInX’, ‘flipInY’, ‘lightSpeedIn’ or ‘random’

READ MORE