Cross-browser Image Carousel Plugin For jQuery - carouselOnPC

carouselOnPC is a simple, easy, cross-browser jQuery slider / carousel plugin designed mainly for desktop that features auto rotation and custom navigation/pagination controls.

How to use it:

1. Link to jQuery library and the jQuery carouselOnPC plugin's files as follow:

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

2. Add your own carousel images to a normal HTML list:

<ul class="carousel-list">
  <li class="carousel-item"><img src="1.jpg"></li>
  <li class="carousel-item"><img src="2.jpg"></li>
  <li class="carousel-item"><img src="3.jpg""></li>
  <li class="carousel-item"><img src="4.jpg"></li>
  <li class="carousel-item"><img src="5.jpg"></li>
</ul>

3. Create the html for the navigation arrows and pagination bullets.

<div class="btn-container">
  <a href="javascript:void(0)">
    <div class="carousel-btn left prev-btn">
      <div class="bg"></div>
      <div class="btn-img"></div>
    </div>
  </a>
  <a href="javascript:void(0)">
    <div class="carousel-btn right next-btn">
      <div class="bg"></div>
      <div class="btn-img"></div>
    </div>
  </a>
</div>

<div class="bottom-btn-container">
  <div class="bottom-btn-inner">
    <ul class="bottom-btn-list">
      <a href="javascript:void(0)"><li class="bottom-btn-item selected" data-number="1"></li></a>
      <a href="javascript:void(0)"><li class="bottom-btn-item"  data-number="2"></li></a>
      <a href="javascript:void(0)"><li class="bottom-btn-item" data-number="3"></li></a>
      <a href="javascript:void(0)"><li class="bottom-btn-item" data-number="4"></li></a>
      <a href="javascript:void(0)"><li class="bottom-btn-item" data-number="5"></li></a>
    </ul>
    <div class="bg"></div>
  </div>
</div>

4. Then wrap them together with the carousel images into a parent container.

<div class="carousel">
  ...
</div>

5. Call the function on the container to initialize the carousel.

$(".carousel").carouselOnPc();

6. Possible plugin options.

$(".carousel").carouselOnPc({
  width:500,
  speed:300,
  autoPlay:false,
  delay:3000
});

7. You can also pass the options as an object via data-setting attribute as this:

<div class="carousel"
     data-setting='{
       "width":520,
       "speed":300,
       "autoPlay":false,
       "delay":4000
     }'>
  ...
</div>

---

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