https://github.com/piobeat/offbeatslider
jQuery Image Slideshow Plugin with Animation
https://github.com/piobeat/offbeatslider
animation image-slider image-slideshow jquery-plugin slide-images
Last synced: 2 months ago
JSON representation
jQuery Image Slideshow Plugin with Animation
- Host: GitHub
- URL: https://github.com/piobeat/offbeatslider
- Owner: PioBeat
- License: apache-2.0
- Created: 2017-03-26T15:33:57.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2017-10-22T17:37:13.000Z (over 8 years ago)
- Last Synced: 2025-10-29T12:37:22.715Z (8 months ago)
- Topics: animation, image-slider, image-slideshow, jquery-plugin, slide-images
- Language: HTML
- Homepage:
- Size: 2.17 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: Changelog.md
- License: LICENSE
Awesome Lists containing this project
README
# offbeatSlider - a jQuery Slideshow Plugin
Easy to use jQuery plugin to create an image slideshow for a thumbnail preview or
for page headers.
**Version: 0.9.2**
## Installation
You can download the latest release [here](https://github.com/PioBeat/offbeatSlider/releases).
Just copy the [css](https://raw.githubusercontent.com/PioBeat/offbeatSlider/master/css/offbeat-slider.css) and
[js](https://raw.githubusercontent.com/PioBeat/offbeatSlider/master/js/offbeat-slider.js) file into your project directory.
Then include it like this in your web page:
```html
```
## Quick Example
This example shows two different styles for the positioning of the navigation controls and the setting of the start image:
Code:
```html
```
## Basic Usage
### HTML
To transform a div into a slide show add the class ``ofp-slider`` to a div and append some images as direct child. For each image
add the class ``ofp-slides``.
```html
```
The data attribute ``slider-index`` specifies the index of the first slide to show.
### JavaScript
Next, put this piece of code at the end of your page:
```javascript
$(".ofp-slider").offbeatSlider({"slideStartIndex": 1});
```
The option ``slideStartIndex`` defines the index of the first slide to show for every slide show div if
the data attribute ``slider-index`` is not defined.
## Options
**First slide** (JavaScript / data-attribute)
JavaScript property ``slideStartIndex`` sets the first slide image for all slide show containers if no
data-attribute ``slider-index`` is specified in the corresponding div with the class ``ofp-slider``.
**Animation**
You can set the transition animation for each slide in the slide show with these options:
```javascript
$(".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**
Automatically show the available slides in sequence with these options:
```javascript
$(".ofp-slider").offbeatSlider({
carousel: true, //auto-animate ?
carouselDelay: 3000
});
```
The default of the carousel animation is ``false`` which means the slides won't be shown automatically one by one.
## Customisation
### Positioning of navigation controls
**Combined**
Slider dots and arrows as one unit:
```html
```
Both controls will be displayed centered horizontally and vertically within the image.
**Separated**
Use two div-containers with class ``ofp-slider-navigation``:
```html
```
Arrow controls will be displayed at the top and the dots are displayed at the bottom within the image.
Any meaningful combination of the listed css classes is possible to position
the navigation controls or the image description.
```css
ofp-center
ofp-top-left
ofp-top-right
ofp-bottom-left
ofp-bottom-right
ofp-middle
ofp-left
ofp-right
ofp-top-middle
ofp-bottom-middle
```
### Text slide
You can have a text-only slide if you add the css class ``ofp-slides-text`` next to ``ofp-slides``:
```html
```
With this piece of code you have 3 slides consisting of a text slide, image slide, and a text slide. The
navigation is placed at the top right corner.
### Image slide with description
For that case:
```html
Description for the picture
```
For the positioning of the description use the same classes as described in Classes for positioning
### Arrow symbols
Use any character within the div-container with class ``ofp-arrow-left`` to represent the left arrow and with
class ``ofp-arrow-right`` for the right arrow.
To change the _size of the symbols_ add the ``font-size`` property to the mentioned classes.
**Examples**
The following table shows some common arrow symbols with their corresponding HTML codes:
HTML code| Symbol
---------|---------
``❮``|❮
``❯``|❯
``❰``|❰
``❱``|❱
``«``|«
``»``|»
### Further examples
Please look into the [test page](index.html) for further examples.
## Websites using offbeatSlider
feel free to send me your website using this component! :)
* [DollStuff](http://www.dollstuff.de/)