Author: | alazurenko |
---|---|
Views Total: | 5,450 views |
Official Page: | Go to website |
Last Update: | September 6, 2015 |
License: | MIT |
Preview:

Description:
A simple, lightweight JavaScript carousel library that allows you to cycle through an array of images when clicked or tapped.
How to use it:
Load the core JavaScript in the document.
<script src="js/Slider.js"></script>
Create a container for the image carousel.
<div id="container"></div>
Insert an array of images to the carousel.
var config = { // arbitrary number of images images: [ 'images/slide_1.jpg', 'images/slide_2.jpg', 'images/slide_3.jpg', 'images/slide_4.jpg', ], // possible values: 'auto', 'manual', 'automanual' mode: 'auto', // arbitrary interger (miliseconds) swipeSpeed: 500, // arbitrary interger (miliseconds). This is used in 'auto' and 'automanual' modes swipeDelay: 3000 };
Initialize the carousel.
window.onload = function() { var sliderElement = document.getElementById('container'); var slider = new Slider(config); slider.init({ element: sliderElement }); };
The sample CSS styles for the carousel.
#container { width: 100vw; max-height: 600px; border: 2px solid black; overflow: hidden; background-color: #000; position: absolute; top: 200px; left: 0; } .slider-list { margin: 0; padding: 0; position: relative; height: 100%; overflow: hidden; width: 500vw; } .slider-list .slide { list-style-type: none; display: inline-block; position: relative; left: 0; width: 100vw; } .slider-list .slide img { display: block; margin: auto auto; max-width: 100vw; }