LIVE PREVIEWBUY FOR $11

The OneByOne Slider is a light-weight, responsive & layered jQuery plugin you need to use 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 most recent replace add an additional instance, which make Twitter Bootstrap Carousel help the one after the other animation.

followrss

Now it’s accessible in WordPress (click on picture beneath)

wordpress plugin

Change logs (please re-download it if you buy it earlier than)

(replace fifteenth 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 wish to use it with jQuery 1.9.1.

(replace 14th Nov 2012)

  • Combine with Bootstrap Carousel. You should utilize it in your favorite framework now.
  • Add autoHideButton choice, 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 may customise every slide’s animation, even every ingredient within the slide’s animation.
  • Add hover to pause choice 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.8.1.

Buy the prolonged license?

I admire in the event you 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.

Options:

  • CSS3 pushed animation, {hardware} accelerated CSS3 transitions for supported fashionable browser.
  • Responsive help, instance included.
  • Cellular pleasant, you need to use it in a contact machine.
  • It’s light-weight, the compressed javascript is simply 4kb.
  • Non-compulsory auto delay slideshow, optionally available hove to pause the slideshow.
  • Every slide or ingredient’s animation might be personalized.
  • Non-compulsory drag operate of mouse.
  • Non-compulsory animation fashion, might be in random or another sort.
  • Non-compulsory arrow and buttons.
  • FAQ is included within the supply bundle.
  • Free replace, you may obtain the longer term replace without spending a dime.

Concerning the CSS3 transition

Notice: The CSS3 transition solely works within the fashionable browser like Firefox, Safar and Chrome. Which doesn’t work in IE7, 8 & 9, it appears the IE 10 will help it.

For jQuery 1.8.0 consumer

It appears there’s a bug with jQuery 1.8.0, please obtain the Uncompressed model of jQuery and remark line 4521, then this plugin will work advantageous. 

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

Out there 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 fashion, 
// take impact in the event you do not pre-defined it within the ingredient
easeType: 'fadeInLeft', 
// width of the slider        
width: 960,  
// top of the slider        
top: 420, 
// the delay of the contact/drag tween        
delay: 300,  
// the tolerance of the contact/drag          
tolerance: 0.25, 
// allow or disable the drag operate by mouse        
enableDrag: true, 
// show the earlier/subsequent arrow or not         
showArrow: true,  
// auto disguise 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 aware of true, if 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

Out there 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’

Credit score

Animate.css is from Dan Eden.
The background picture within the bootstrap instance is from photos8.

Suggestions For You

XML Picture/Video Grid Gallery:
grid gallery
The AS3 Flash Fotography Template:
photography
Source