The OneByOne Slider is a 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. I’ve tested it on an iPhone, it works properly.
The API looks like:
$(document).ready(function() {
$('#banner').oneByOne({
className: 'oneByOne', // the wrapper's name
sliderClassName: 'oneByOne_item', // the each slider div's class name
easeType: 'fadeInLeft', // the ease animation style
width: 960, // width of the slider
height: 420, // height of the slider
delay: 300, // the delay of the touch/drag tween
tolerance: 0.25, // the tolerance of the touch/drag
enableDrag: true, // enable or disable the drag function by mouse
showArrow: true, // display the previous/next arrow or not
showButton: true, // display the circle buttons or not
slideShow: false, // auto play the slider or not
slideShowDelay: 3000 // the delay millisecond of the slidershow
});
});
The available easeType are:
‘rollIn’, ‘fadeIn’, ‘fadeInUp’, ‘fadeInDown’, ‘fadeInLeft’, ‘fadeInRight’, ‘fadeInRight’, ‘bounceIn’, ‘bounceInDown’, ‘bounceInUp’, ‘bounceInLeft’, ‘bounceInRight’, ‘rotateIn’, ‘rotateInDownLeft’, ‘rotateInDownRight’, ‘rotateInUpLeft’, ‘rotateInUpRight’ or ‘random’.
Features:
- CSS3 driven animation.
- Mobile friendly, you can use it in a touch device.
- Optional auto delay slideshow.
- Optional drag function of mouse.
- Optional animation style, can be in random or any other type.
- Optional arrow and buttons.
Credit
Animate.css is form Dan Eden.
Recommendations For You
XML Image/Video Grid Gallery:
XML Image/Video Portfolio Template:
