Author: | SidKwok |
---|---|
Views Total: | 1,665 views |
Official Page: | Go to website |
Last Update: | August 9, 2016 |
License: | MIT |
Preview:

Description:
slide.js is a lightweight, dependency-free JavaScript slider library for switch between an array of images with horziontal/vertical sliding or cross-fading effects.
How to use it:
Load the necessary JavaScript and CSS files in the html file.
<link rel="stylesheet" href="dist/css/slide.css"> <script src="dist/js/slide.js"></script>
Create a DIV element that will be severed as the container for the slider.
<div id="slide"></div>
Create a new Slider object and specify an array of images you want to present.
new Slide('#slide', { imgs: [ '1.jpg', '2.jpg', '3.jpg', ] });
Change the default sliding direction to ‘horizontal’.
new Slide('#slide', { imgs: [ '1.jpg', '2.jpg', '3.jpg', ], animation: 'slideLeft' });
Set the animation to ‘fade’ so the slider will act as a cross-fading slideshow.
new Slide('#slide', { imgs: [ '1.jpg', '2.jpg', '3.jpg', ], animation: 'fade' });
Specify the fixed height / width of your slider.
new Slide('#slide', { imgs: [ '1.jpg', '2.jpg', '3.jpg', ], width: 600, height: 400, });
Config the autoplay behavior.
new Slide('#slide', { imgs: [ '1.jpg', '2.jpg', '3.jpg', ], autoswitch: { open: true, delay: 2000 }, });