Minimal Content Carousel Plugin For jQuery - junSlider

junSlider is an extremely lightweight jQuery slider plugin for creating a continuous horizontal carousel with support for auto rotation, fade / slide animations and dots / arrows navigation.

Basic usage:

1. Add the jQuery junSlider plugin's JavaScript and CSS files into the html page. Be sure that the junSlider.js script is loaded after jQuery library.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="src/junSlider.js"></script>
<link rel="stylesheet" href="src/junSlider.css">

2. Include the Font Awesome 4 for navigation arrow icons.

<link rel="stylesheet" href="font-awesome.min.css">

3. Wrap any slider content into an html unordered list.

<ul>
  <li>
    <div class="text">
      <h1>Sample00</h1>
      <p>This is sample text</p>
    </div>
  </li>
  <li>
    <div class="text">
      <h1>Sample01</h1>
      <p>This is sample text</p>
    </div>
  </li>
  <li>
    <div class="text">
      <h1>Sample02</h1>
      <p>This is sample text</p>
    </div>
  </li>
</ul>

4. Call the function on the html list and done.

$('ul').junSlider();

5. Default customization options.

$('ul').junSlider({

  // 'slide' or 'fade'
  type:'slide', 
  
  // height of the carousel
  height:300, 

  // show pagination dots
  dot:true, 

  // show navigation arrows
  pointer:true, 

  // animation speed
  speed:400, 

  // auto play
  autoSlide:false

});

---

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