ajSlider - Image and Content jQuery Plugin

ajSlider is a slideshow jQuery plugin which can be used as the main banner for your webpages or as a image gallery. All you have to do is add the js files, initialize jQuery and add the img tag and anchor tags enclosed inside the ajSlider div.

Features

• Enable/Disable the automatic slideshow action.
• Set the height/width of the slider to your requirement or if not specified, it automatically calculates the size from the added images.
• Specify the colors for the slider bullets.
• Specify the position and size of the slide's text content.

Source: ajarunthomas.com

1. INCLUDE JS FILES

<script type="text/javascript" src="js/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="js/ajSlider.js"></script>

2. HTML

<div id="ajSlider">
  <img src="images/1.jpg" width="" height="" />
  <img src="images/2.jpg" width="" height="" />
  <img src="images/3.jpg" width="" height="" />
  <img src="images/4.jpg" width="" height="" />
  <img src="images/5.jpg" width="" height="" />

  <a>Text 1</a>
  <a>Text 2</a>
  <a>Text 3</a>
  <a>Text 4</a>
  <a>Text 5</a>
</div>

3. JAVASCRIPT

$(document).ready(function() {
    $('#ajSlider').ajSlider(3000);
});

4. OPTIONS

$(document).ready(function() {
    $('#ajSlider').ajSlider(3000,{
        "slideshow":"disable", //disable or enable the slideshow
        "width":"100%", //width of slider
        "height":"100%", //height of slider
        "activeBullet":"red", //color of the active bullet
        "inactiveBullet":"orange", //color of inactive bullet
        "textPosition":"30%", //position of text from top
        "textSize":"60px" //font size of the text
        });
});

Height/Width

If you want the slider to fit the whole screen, set the width and height to "100%". Or if you want to fit the slider in as a banner then set the width alone to "100%" and the height will be automatically calculated to maintain the aspect ratio of the image. If you want to use it as a image gallery, then specify the height and width to fit in to your webpage. 
Default value : Actual size of the image. If the images are of different sizes, then the highest dimensions.

Text content

You can set the font size of the text with the textSize property and the position the the text from the top of the slider with the textPosition property. 
Default value : textSize is 32px and textPosition is 35%.

Bullets

You can specify the colors for the bullets both the active and inactive bullets. You can set the color of active bullet with activeBullet property and others with inactiveBullet property. You can either specify the name of color such as "blue" if you are familiar with the HTML color names or else use the rgb property to specify the color. For example, rgb(0,0,255) for blue. 
Default value : activeBullet is black and inactiveBullet is grey.