This is a pure javascript slide-show gallery, dependency-free, responsive, serving lazy loading images according to the screen size, hardware accelerated, retina ready, AMD ready, swipe/drag/touch enabled. Inspired by many sources such as:
At the moment this plugin's size is ~15.0 KB minified. It supports all the modern browsers from IE9 on.
You can find this repository and its guide on the
Github page.
Available options:
Property Description Type DEFAULT
separator Separator between sources for normal screens and retina screens String '|'
breakpoints Array containing objects having width and src properties. If set to false Elba js will look for just the default data-src attribute Boolean/Array false
container Setting the parent container's class which will constrain the slide size String 'elba-wrapper'
error Callback function in case of image unsuccesful load. //TODO Boolean/Function false
success Callback function in case of image succesful load. //TODO Boolean/Function false
duration The duration of the sliding animation. Expressed in milliseconds Number 1000
easing The easing of the animation. You can pick among 24 pre-set easings: String 'easeInOutCubic'
navigation Whether to set or not the arrows for the navigation Boolean true
dots Whether to set or not the dots for the navigation Boolean true
dotsContainer Append the dots to a custom HTML element by passing its ID Boolean/String false
slideshow Interval between any slide. Set 0 to disable slideshow. Expressed in milliseconds Number 10000
preload Number of pictures you want to load after the visible one has been loaded Number 1
swipeThreshold The swiping threshold expressed in pixels. Number 60
epsilon The epsilon factor for the Bezier curve ( 0.01 <= epsilon <= 1 ). A smaller epsilon gives you an emphasized easing, a higher epsilon gives you a smoother easing. Number 0.2
###List of predefined easings
easeInSine
easeOutSine
easeInOutSine
easeInQuad
easeOutQuad
easeInOutQuad
easeInCubic
easeOutCubic
easeInOutCubic
easeInQuart
easeOutQuart
easeInOutQuart
easeInQuint
easeOutQuint
easeInOutQuint
easeInExpo
easeOutExpo
easeInOutExpo
easeInCirc
easeOutCirc
easeInOutCirc
easeInBack
easeOutBack
easeInOutBack
You can have more than one instance per page, and it doesn't have to be a fullscreen gallery.
You can find me here.