Fullscreen Responsive Slideshow Plugin With jQuery - ajSlider

File Size: 6.49 KB
Views Total: 3557
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Fullscreen Responsive Slideshow Plugin With jQuery - ajSlider

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.