Slide is an extremely lightweight (~2.13kB minified) jQuery plugin for interactive slideshows.
- Ensure jQuery is included on your page (using a
<script>
tag or otherwise) - Include
slide.js
with a<script>
tag - Add the container HTML to your page:
<div class="slider"></div>
- Fill the slider container with your slides (images, divs etc.) which must all have the same width and height.
- Add one rule to your CSS:
.slider div {
width:100%;
height:100%;
display:inline-block;
}
- Activate the plugin with the following code snippet
$(document).ready(function() {
$('.slider').slide();
});
Below is an example of all the options available for you to configure and their default values.
$('element').slide({
speed: 1000, // Animation Speed in milliseconds
easingFunc: 'ease', // CSS transition easing function
controls: {
visible: true,
prevLabelText: 'Prev',
nextLabelText: 'Next'
}
});
Slide is no longer actively maintained and is only on GitHub for archive purposes. Feel free to use the code in any way you like, enjoy!