1.0.5 • Published 7 years ago
jquery-slideshow v1.0.5
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">
<li>
<img src="img/slide1.jpg" alt="slide1"/>
</li>
<li>
<img src="img/slide2.jpg" alt="slide2"/>
</li>
<li>
<img src="img/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.