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.











