Fully Functional jQuery Image Carousel/Scroller Plugin - SimpleCarousel

SimpleCarousel is a simple yet robust jQuery plugin which allows you to create image carousel, image scroller or image slideshow with lots of customization options.

Features:

• Auto play on page load.
• Custom slide animations.
• jQuery easing plugin based easing effects.
• Endless loop.
• Supports Ajax content.
• Buttons & arrows navigation.
• Supports multiple items in one slide.
• Supports Callback events.
• Cross browser.

Basic Usage:

1. Include jQuery library and the JQuery SimpleCarousel plugin at the bottom of the web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="path/to/jquery.SimpleCarousel.js"></script>

2. Include the jQuery easing plugin after jQuery library (Optional).

<script src="path/tojquery.easing/jquery.easing.1.3.min.js"></script>

3. Include the required album-carousel.css in the head section.

<link href="css/album-carousel.css" rel="stylesheet">

4. Create the Html for an image carousel.

<div id="carousel-album" class="carousel-album"> <a title="Previous Page" id="carousel-album-prev-btn" class="carousel-album-prev-btn" href="#prev">‹</a>
    <div id="carousel-album-container" class="carousel-album-container">
      <ul id="carousel-album-list" class="carousel-album-list">
        <li>
          <p><a href="#"><img width="1250" height="770" alt="SimpleCarousel (1)" src="images/b-01.jpg"></a></p>
          <h3><a target="_blank" href="#">SimpleCarousel (1)</a></h3>
        </li>
        <li>
          <p><a href="#"><img width="1250" height="770" alt="SimpleCarousel (2)" src="images/b-02.jpg"></a></p>
          <h3><a target="_blank" href="#">SimpleCarousel (2)</a></h3>
        </li>
        <li>
          <p><a href="#"><img width="1250" height="770" alt="SimpleCarousel (3)" src="images/b-03.jpg"></a></p>
          <h3><a target="_blank" href="#">SimpleCarousel (3)</a></h3>
        </li>
        <li>
          <p><a href="#"><img width="1250" height="770" alt="SimpleCarousel (4)" src="images/b-04.jpg"></a></p>
          <h3><a target="_blank" href="#">SimpleCarousel (4)</a></h3>
        </li>
        <li>
          <p><a href="#"><img width="1250" height="770" alt="SimpleCarousel (5)" src="images/b-05.jpg"></a></p>
          <h3><a target="_blank" href="#">SimpleCarousel (5)</a></h3>
        </li>
        <li>
          <p><a href="#"><img width="1250" height="770" alt="SimpleCarousel (6)" src="images/b-06.jpg"></a></p>
          <h3><a target="_blank" href="#">SimpleCarousel (6)</a></h3>
        </li>
        <li>
          <p><a href="#"><img width="1250" height="770" alt="SimpleCarousel (7)" src="images/b-07.jpg"></a></p>
          <h3><a target="_blank" href="#">SimpleCarousel (7)</a></h3>
        </li>
        <li>
          <p><a href="#"><img width="1250" height="770" alt="SimpleCarousel (8)" src="images/b-08.jpg"></a></p>
          <h3><a target="_blank" href="#">SimpleCarousel (8)</a></h3>
        </li>
        <li>
          <p><a href="#"><img width="1250" height="770" alt="SimpleCarousel (9)" src="images/b-09.jpg"></a></p>
          <h3><a target="_blank" href="#">SimpleCarousel (9)</a></h3>
        </li>
      </ul>
    </div>
    <a title="Next Page" id="carousel-album-next-btn" class="carousel-album-next-btn" href="#next">›</a>
</div>

5. Initialize the image carousel with optional settings.

(function($){
$("#carousel-album").simpleCarousel({
container: "#carousel-album-container",
carousel: "#carousel-album-list",
prevBtn: "#carousel-album-prev-btn",
nextBtn: "#carousel-album-next-btn",
playDirection: "H",
cyclePlay: true,
paginated: true,
easing: "easeOutBounce"
});
})(jQuery);

6. All the default settings.

// carousel container
container: "#carousel-container",

// carsoule list selector
// 默认值：#carousel-list
carousel: "#carousel-list",

// item selector
item: "li",

// previous button
prevBtn: "#carousel-prev-btn",

// next button
nextBtn: "#carousel-next-btn",

// H: horizontal
// v: vertical
playDirection: "H",

// autoplay
autoPlay: true,

// delay
pageSwitchDelay: 3000,

// animation duration
animateDuration: 500,

// easing options. Requires jQuery easing plugin
easing: "swing",

// forward or back
pageDirection: "back",

// endless loop
cyclePlay: false,

// auto display/hide navigation buttons
buttonAvailable: false,

// index slide
defaultPage: 0,

// number of items on one slide
itemsPerStep: 0,

// callback
beforeSwitch: function(){
   alert("Carousel is starting！");
},

// callback
afterSwitched: function(){
   alert("Carousel has been switched！");
},

// pagination
paginated: false,

// ajax
ajax: {
url: TXT.EMPTY,

itemInnerHTML: TEMPLATE.ITEM_INNER_HTML,

beforeSend: null,

complete: null,

error: null
}

---

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