Ultra-light jQuery Content Slider Plugin - basicSlider

This is a lightweight, simple-to-use jQuery slider which helps you create a basic slider / carousel UI from an unordered list of web content. The slider will automatically slide to next slide content in every 3 seconds. Also comes with a loading element which indicates the remaining delay time.

How to use it:

1. Insert a list of web content together with the navigation controls into the webpage.

<div id="slider">

  <!-- Loading element -->
  <div class="loading"></div>       

  <!-- Left arrow -->     
  <div class="arrow arrow-left"></div>

  <!-- Slides -->
  <ul class="slides">
    <li class="slide slide1"></li>
    <li class="slide slide2"></li>
    <li class="slide slide3"></li>
    <li class="slide slide4"></li>
    <li class="slide slide5"></li> 
    <li class="slide slide6"></li>               
  </ul>

  <!-- Right arrow -->
  <div class="arrow arrow-right"></div>
  
</div>

2. The main CSS styles for the slider.

<div id="slider">

  <!-- Loading element -->
  <div class="loading"></div>       

  <!-- Left arrow -->     
  <div class="arrow arrow-left"></div>

  <!-- Slides -->
  <ul class="slides">
    <li class="slide slide1"></li>
    <li class="slide slide2"></li>
    <li class="slide slide3"></li>
    <li class="slide slide4"></li>
    <li class="slide slide5"></li> 
    <li class="slide slide6"></li>               
  </ul>

  <!-- Right arrow -->
  <div class="arrow arrow-right"></div>
  
</div>

3. Style the next/right navigation:

.arrow {
  height: 480px;
  width: 50px;
  background: rgba(255,255,255,0.0);
  z-index: 99;
}

.arrow:hover { background: rgba(255,255,255,0.3); }

.arrow-left {
  top: 0;
  left: 0;
  position: absolute;
}

.arrow-right {
  top: 0;
  right: 0;
  position: absolute;
}

5. Place jQuery library and the core JavaScript file app.js at the bottom of the page.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="app.js"></script>

6. Initialize the slider and done.

$('#slider').basicSlider();

---

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