diff --git a/Changelog.md b/Changelog.md index 66ee3a3..43d5870 100644 --- a/Changelog.md +++ b/Changelog.md @@ -1,5 +1,11 @@ # Changelog +## [0.9.2] - 2017-10-22 +- Support for CSS animations now possible +- Fixed issue regarding the settings object. Settings are now shared correctly among the sliders. +Individual settings now possible for single sliders. +- Some code improvements + ## [0.9.1.1] - 2017-04-27 Minor CSS update - Adjustment of arrow and slider dot size when showing on a smaller screen diff --git a/README.md b/README.md index ae261ed..3dc62ff 100644 --- a/README.md +++ b/README.md @@ -3,7 +3,7 @@ Easy to use jQuery plugin to create an image slideshow for a thumbnail preview or for page headers. -**Version: 0.9.1.1** +**Version: 0.9.2** ## Installation @@ -123,10 +123,33 @@ You can set the transition animation for each slide in the slide show with these $(".ofp-slider").offbeatSlider({ animate: true, duration: 1000, + animation: "normal", easing: "linear" //easein, linear, ... }); ``` You can adjust the duration and the easing function. The name for the easing functions are the same as in jQuery. +This is the default slider implementation. A simple and beautiful fade-in transition is created. + +If you want to use specific CSS3 animations you have to declare the following settings: +```javascript +$(".ofp-slider").offbeatSlider({ + animate: true, + animation: "css", + animationRight: "swing-in-right-fwd", + animationLeft: "swing-in-left-fwd" + }); +``` + +The ``animation`` property tells the slider to use the ``animationRight`` and ``animationLeft`` values which are CSS animations +for both directions. Those classes have to be available in a css file. The same settings can also be made available in the correspondig div +with the data-attributes ``data-animation-right`` and ``data-animation-left``: +```html +
+``` + +To create CSS animations you can use [animista](http://animista.net). **Carousel**