Lightweight Cross-fading Carousel Plugin For jQuery
File Size: | 338 KB |
---|---|
Views Total: | 1217 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Image Slider is a jQuery plugin which allows to display images stored in a same folder in an infinite-looping carousel interface with a crossfade transition effect.
How to use it:
1. Include jQuery library and the jQuery image slider's JS and stylesheet files in the page.
<link rel="stylesheet" href="image-slider.css"> <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="image-slider.js"></script>
2. Include the Font Awesome for navigation arrows.
<link rel="stylesheet" href="font-awesome.min.css">
3. Put your images in the same folder and make them have the same file type and extension: photo-01.jpg, photo-02.jpg, photo-0x.jpg, etc.
4. Add the first images into the carousel:
<div id="image-slider"> <img id="slider-image" src="photos/photo-01.jpg"> <div id="slider-arrows"> <a href="javascript:void(0);" id="previous-img"> <span><i class="fa fa-chevron-left"></i></span> </a> <a href="javascript:void(0);" id="next-img"> <span><i class="fa fa-chevron-right"></i></span> </a> </div> <div id="slider-circles"></div> </div>
5. Initialize the plugin and specify the number of images embedded in the slider.
// setImgSlider(imgCount, imgTimerInterval) setImgSlider(5, 5000);
This awesome jQuery plugin is developed by andis-sprinkis. For more Advanced Usages, please check the demo page or visit the official website.