jQuery Slideshow
Simple jQuery slideshow library. Lightweight, responsive, easy to implement & configure.
Demo
http://www.sjoloughlin.com/jquery-slideshow
Installation
Download
Get the latest release from the releases page and add the files to your project.
Link the stylesheet inside your <head> tag:
<link rel="stylesheet" type="text/css" href="slider.min.css" />Then, before your closing <body> tag add:
<script type="text/javascript" src="slider.min.js"></script>NPM
npm install jquery-slideshowUsage
Add the following HTML for the slider:
<ul class="slider" id="slider"> <li> <img src="images/slide1.jpg" alt="slide1"/> </li> <li> <img src="images/slide2.jpg" alt="slide2"/> </li> <li> <img src="images/slide3.jpg" alt="slide3"/> </li> </ul>Then, before your closing <body> call .slider() on the slider element:
<script type="text/javascript"> $(window).on("load", function() { $("#slider").slider(); }); </script>Configuration
The slider is configurable by passing in a configuration object when calling .slider() on the slider element:
<script type="text/javascript"> $(window).on("load", function() { $("#slider").slider({ width : '1024px', // Width of the slider height : '500px', // Height of the slider speed : 2000, // How long the slide animation transition lasts for in millisecond delay : 5000 // How long the slide will be displayed for in milliseconds }); }); </script>Options
| Config | Type | Default | Description |
|---|---|---|---|
speed | int | 1000 | How long the slide animation transition lasts for in milliseconds e.g. 1000 = 1 second |
delay | int | 3000 | How long the slide will be displayed for in milliseconds e.g. 3000 = 3 seconds |
autoplay | boolean | true | Whether to start the slideshow automatically |
navigation | boolean | true | Whether to display left/right navigation buttons |
pagination | boolean | true | Whether to display clickable slide indicators |
width | string | 100% | Width of the slider |
height | string | auto | Height of the slider |
direction | string | right | The direction that the slider will slide |
responsive | boolean | true | Whether to make the size of the slider responsive |
License
This project is licensed under the MIT License - see the LICENSE.md file for details.
