https://github.com/kevguy/deslider
A feature-rich slideshow library
https://github.com/kevguy/deslider
es6-javascript javascript library scss slideshow webpack
Last synced: about 2 months ago
JSON representation
A feature-rich slideshow library
- Host: GitHub
- URL: https://github.com/kevguy/deslider
- Owner: kevguy
- License: mit
- Created: 2017-02-05T17:21:17.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-03-25T21:28:46.000Z (about 8 years ago)
- Last Synced: 2024-10-10T11:18:22.639Z (9 months ago)
- Topics: es6-javascript, javascript, library, scss, slideshow, webpack
- Language: JavaScript
- Homepage:
- Size: 479 KB
- Stars: 7
- Watchers: 3
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# Deslider
Deslider is a highly configurable lightweight slideshow library written with finger gesture support
## Table of contents
- [Live Demo](#live-demo)
- [Installation](#installation)
- [Getting started](#getting-started)
- [CDN](#cdn)
- [Bower/NPM](#bowernpm)
- [Configuration](#configuration)
- [Example Options](#exmaple-options)
## Live Demo
[Codepen](http://codepen.io/kevlai22/pen/zNmZQv)
## Installation
You may install Deslider using NPM or Bower:
- NPM: `npm install deslider`
- Bower: `bower install deslider`
If you prefer, you can include this library in your project using our officical CDN:
- [Deslider on jsDelivr](https://www.jsdelivr.com/projects/deslider)
## Getting Started
### CDN
Add the necessary links to your `` element: with a unique `id`:
```html
```
### Bower/NPM
```html
```
And add a `
` with a unique `id`:
```html
```
## Configuration
At the end of your page you need to initialize Deslider by running the following code:
```javascript
var myDeslider = new Deslider(imgSources, container, options);
```
* `imgSources` (*Array*): contains all the images you want to show in Deslider
* `container` (*String*): the `id` of the container
* `options` (*Object*, Optional): configuration
* `auto` (*Object*): the existence of this object enables Deslider's automatic animation and defines its behaviors
* `speed` (*Number*): the number of time(ms) for switching to another image automatically
* `pauseOnHover` (*Boolean*): enables/disables the animation when the mouse hovers on Deslider
* `fullScreen` (*Boolean*): enables/disables the button that lets user toggle between full-screen mode and normal mode
* `swipe` (Boolean): enables/disables the feature that lets swipe the slideshow for another image
* `pagination` (*Boolean*): shows/hides the pagination bar
* `repeat` (*Boolean*): specifies if looping back to the first image after the last image in imgSources is shown
### Example Usage:
```javascript
var imgSources = [
"sample.jpg",
"https://sample_image.com/source.jpg",
...
];
var containerId = '#deslider-container';
var options = {
auto: {
speed: 3000,
pauseOnHover: true,
},
fullScreen: true,
swipe: true,
pagination: true,
repeat: true
};
var myDeslider = new Deslider(imgSources, containerId, options);
```
## License
[MIT License](https://github.com/kevguy/Deslider/blob/master/LICENSE.txt)