Fullscreen Responsive Slideshow Plugin With jQuery - ajSlider
File Size: | 6.49 KB |
---|---|
Views Total: | 3569 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
ajSlider is a super tiny jQuery plugin used for generating a fullscreen, responsive, auto-rotating carousel / slideshow from images and plain text.
How to use it:
1. Add images and text into the slideshow.
<div id="ajSlider"> <img src="1.jpg" /> <img src="2.jpg" /> <img src="3.jpg" /> <img src="4.jpg" /> <img src="5.jpg" /> <a>first slide in the slider</a> <a>second slide in the slider</a> <a>third slide in the slider</a> <a>fourth slide in the slider</a> <a>fifth slide in the slider</a> </div>
2. Download and include the jQuery ajSlider plugin's script after you've added jQuery library.
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script> <script src="js/ajSlider.min.js"></script>
3. Initialize the plugin with default configs.
$('#ajSlider').ajSlider();
4. Change the default interval between each slide.
$('#ajSlider').ajSlider(5000);
5. More configuration options.
$('#ajSlider').ajSlider(5000,{ // disable or enable the slideshow "slideshow":"disable", // width of slideshow "width":"100%", // height of slideshow "height":"100%", // color of the active bullet "activeBullet":"red", // color of inactive bullet "inactiveBullet":"orange", // position of text from top "textPosition":"30%", // font size of the text "textSize":"60px" });
This awesome jQuery plugin is developed by ajarunthomas. For more Advanced Usages, please check the demo page or visit the official website.