Simple Automatic Content Carousel Slider with jQuery - aumslider

A basic carousel/slideshow jQuery plugin which allows you to embed any Html content into an infinite-looping content slider with a progress bar showing the remaining time before the next slide is to be switched.

How to use it:

1. The Html structure. Create an unordered list of Html content (e.g. images, iframes, videos, etc) for the content slider.

<ul class="aumslider">
  <li>
    <img src="1.jpg">
  </li>
  <li>
    <iframe width="400" height="300" src="http://www.youtube.com/embed/0AqnCSdkjQ0" frameborder="0" allowfullscreen></iframe>
  </li>
  <li>
    <img src="2.jpg"> 
  </li>
  <li>
    <img src="3.jpg"> 
  <li>
    <iframe width="400" height="300" src="http://www.youtube.com/embed/09R8_2nJtjg" frameborder="0" allowfullscreen></iframe>
  </li>
</ul>

2. Create a progress bar for the content slider.

<div id="loading"></div>

3. Create next/prev buttons for slider controls.

<input type="button" value="Previous" class="prev">
<input type="button" value="Next" class="next">

4. The basic slider styles.

.aumslider {
  background: #efefef;
  padding: 5px;
  width: 400px;
  height: 300px;
  margin-bottom: 14px;
  border-radius: 3px;
}

.hideli { display: none; }

.showli { display: block; }

.aumslider ul {
  list-style: none;
  padding: 0px;
  margin: 0px;
}

5. Style the slider controls & progress bar.

.next,
.prev {
  background: #333;
  border: none;
  color: #fff;
  padding: 10px;
  cursor: pointer;
  border-radius: 3px;
}

.next:hover,
.prev:hover {
  background: #ccc;
  color: #333;
}

#loading {
  width: 0px;
  height: 10px;
  background-color: #333;
}

6. Add the necessary jQuery library to your web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 

7. The core jQuery script to enable the content slider.

$(document).ready(function(){
  var lengthli = $('ul.aumslider li').length;

  var startfrom =1;

  $(".aumslider li").each(function(){
  var wtf = lengthli - startfrom;
    $(this).attr('class', "slide"+wtf);
    startfrom++;
  }); 

  $(".aumslider li").addClass("hideli");

  var defval = 0;

  function showslide(getnum){
   var createclass= "slide"+getnum;
    $("."+createclass).addClass("showli");
  }

  showslide(defval);

  $(".next").click(function(){
    if(defval < lengthli-1){
      $(".aumslider li").removeClass("showli");
      defval++;
      showslide(defval);
    }
    else {
      $(".aumslider li").removeClass("showli");
      defval =0;
      showslide(defval);
    }
  });
   
  $(".prev").click(function(){
    if(defval == 0){
      $(".aumslider li").removeClass("showli");
      defval = lengthli-1;
    
      showslide(defval);
    }
    else {
      $(".aumslider li").removeClass("showli");
      defval--;
      showslide(defval);
    }
  });

  function loopslider() {
    setInterval(function(){
      if(defval < lengthli-1){
        $(".aumslider li").removeClass("showli");
        defval++;
        showslide(defval);
      }
    else{
        $(".aumslider li").removeClass("showli");
        defval =0;
        showslide(defval);
    }   
   }, 5000);
  }

  loopslider();

  var currentIndex = 0;

  function progressbar() {
    $("#loading").css("width", "0px");
    $('#loading').animate({
      width: '400px'
    }, 5000, "linear", progressbar);
  }

  progressbar(); 

});

---

This awesome jQuery plugin is developed by Aumkar Thakur. For more Advanced Usages, please check the demo page or visit the official website.