Deslider
A feature-rich slideshow library
Install / Use
/learn @kevguy/DesliderREADME
Deslider
Deslider is a highly configurable lightweight slideshow library written with finger gesture support
Table of contents
Live Demo
Installation
You may install Deslider using NPM or Bower:
- NPM:
npm install deslider - Bower:
bower install desliderIf you prefer, you can include this library in your project using our officical CDN: - Deslider on jsDelivr
Getting Started
CDN
Add the necessary links to your <head> element: with a unique id:
<script type="text/javascript" src="https://cdn.jsdelivr.net/deslider/1.5.1/Deslider.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/deslider/1.5.1/style.css">
Bower/NPM
<script type="text/javascript" src="INSTALLATION_DIR/lib/Deslider.min.js"></script>
<link rel="stylesheet" type="text/css" href="INSTALLATION_DIR/css/style.css">
And add a <div> with a unique id:
<div id="deslider-container"></div>
Configuration
At the end of your page you need to initialize Deslider by running the following code:
var myDeslider = new Deslider(imgSources, container, options);
-
imgSources(Array): contains all the images you want to show in Deslider -
container(String): theidof 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:
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
Related Skills
node-connect
342.0kDiagnose OpenClaw node connection and pairing failures for Android, iOS, and macOS companion apps
frontend-design
84.7kCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
openai-whisper-api
342.0kTranscribe audio via OpenAI Audio Transcriptions API (Whisper).
commit-push-pr
84.7kCommit, push, and open a PR
