The OneByOne Slider is a light-weight, responsive & layered jQuery plugin you should utilize to show your picture and textual content one after the other. The CSS3 animation is pushed by Animate.css. It’s cellular pleasant, which help wipe left/proper in your contact machine like iPhone & iPad. You’ll be able to drag and drop to navigate together with your mouse too. The newest replace add an additional instance, which make Twitter Bootstrap Carousel help the one after the other animation.
Now it’s out there in WordPress (click on picture beneath)
Change logs (please re-download it if you buy it earlier than)
(replace 15th Might 2013)
- Replace to the jQuery 1.9.1, and use Modernizr to detect the CSS3 transition help. You’ll be able to re-download the supply bundle if need to use it with jQuery 1.9.1.
(replace 14th Nov 2012)
- Combine with Bootstrap Carousel. You should use it in your favorite framework now.
- Add autoHideButton possibility, set to false to make the arrows all the time be seen.
- Replace the assistance documentation.
(replace 14th Sep 2012)
- Add responsive instance.
- Add fade transition in IE9-, which doesn’t help the CSS3 transition.
- Now you’ll be able to customise every slide’s animation, even every component within the slide’s animation.
- Add hover to pause possibility of the slideshow.
- Added ‘fadeInLeftBig’, ‘fadeInRightBig’, ‘fadeInUpBig’, ‘fadeInDownBig’, ‘flipInX’, ‘flipInY’, ‘lightSpeedIn’ animation.
- Repair bugs: hyperlink can’t be clicked within the iOS.
- Replace to jQuery 1.eight.1.
Buy the prolonged license?
I respect for those who can put this merchandise’s hyperlink in your merchandise’s description. Please present solely the minified model of js file in your theme, and one prolonged license might be utilizing on a theme solely.
- CSS3 pushed animation, accelerated CSS3 transitions for supported trendy browser.
- Responsive help, instance included.
- Cell pleasant, you should utilize it in a contact machine.
- Optionally available auto delay slideshow, non-compulsory hove to pause the slideshow.
- Every slide or component’s animation might be custom-made.
- Optionally available drag perform of mouse.
- Optionally available animation model, might be in random or some other sort.
- Optionally available arrow and buttons.
- FAQ is included within the supply bundle.
- Free replace, you’ll be able to obtain the longer term replace totally free.
Concerning the CSS3 transition
Notice: The CSS3 transition solely works within the trendy browser like Firefox, Safar and Chrome. Which doesn’t work in IE7, eight & 9, it appears the IE 10 will help it.
For jQuery 1.eight.zero consumer
It appears there’s a bug with jQuery 1.eight.zero, please obtain the Uncompressed model of jQuery and remark line 4521, then this plugin will work positive.
// throw new Error( "Syntax error, unrecognized expression: " + msg );
Accessible plugin settings
// the wrapper's title className: 'oneByOne', // the wrapper div's class title of every slider sliderClassName: 'oneByOne_item', // pause the auto delay slideshow when consumer hover pauseByHover: true, // the worldwide ease animation model, // take impact for those who do not pre-defined it within the component easeType: 'fadeInLeft', // width of the slider width: 960, // peak of the slider peak: 420, // the delay of the contact/drag tween delay: 300, // the tolerance of the contact/drag tolerance: zero.25, // allow or disable the drag perform by mouse enableDrag: true, // show the earlier/subsequent arrow or not showArrow: true, // auto cover the arrows when consumer depart the slider or not autoHideButton: true, // show the circle buttons or not showButton: true, // auto play the slider or not slideShow: false, // the delay millisecond of the slidershow slideShowDelay: 3000, // set conscious of true, while you'll change the // slider's dimension with the media question in CSS responsive: true // when slider is smaller than minWidth, // the textual content are be hidden within the responsive minWidth: 480
‘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’
Animate.css is from Dan Eden.
The background picture within the bootstrap instance is from photos8.
Suggestions For You
XML Picture/Video Grid Gallery:
The AS3 Flash Fotography Template: