Fork me on GitHub

Simple and Customizable

"jq.carousel" is a jQuery plugin you can implement a simple carousel and Customizable.

Because they are designed to be flexible in various situations, can also be embedded in a responsive site for example.


"jq.carousel" is by default have the ability to loop, loop function can also be turned off in options.


Because the default implementations of the indicator are here to inform the user, also perfectly navigation. Because the style indicator in the CSS, you can look you like.


You can use an event that has been prepared in advance, the timing of any processing.


You can download the source code from Github.


Reading at any point and jq.carousel.js jQuery, and then run after it.

<script src="scripts/lib/jquery-1.7.1.min.js"></script>
<script src="scripts/jq.carousel.js"></script>

How to use

If you want to use the simplest is as follows. Indicator in this case will not be displayed. In addition, since the button to send a page of the carousel will not be discharged, and then implemented using the API.


<div class="carousel">
  <div id="carousel" class="carousel_inner">
    <div class="carousel_box">1</div>
    <div class="carousel_box">2</div>
    <div class="carousel_box">3</div>
    <div class="carousel_box">4</div>
    <div class="carousel_box">5</div>
    <div class="carousel_box">6</div>
    <div class="carousel_box">7</div>
    <div class="carousel_box">8</div>
  <p class="btns">
    <input type="button" id="carousel_prev" value="prev">
    <input type="button" id="carousel_next" value="next">


#carousel {
  margin: 0 auto;
  width: 600px;
  height: 150px;
  background: #efefef;
  overflow: hidden;
#carousel .carousel_box {
  float: left;
  border: solid #fff 5px;
  width: 140px;
  height: 140px;
  color: #fff;
  background: #252525;
  line-height: 140px;
  text-align: center;
  font-size: 123%;


var $carousel = $('#carousel').carousel();
$('#carousel_prev').on('click', function(ev) {
$('#carousel_next').on('click', function(ev) {


You can turn off the loop If you specify the option when you run, to use custom easing function. For descriptions of the options available, please refer to the following table.

Key Commentary (Contents of the () is the default value)
vertical (false) Vertical carousel will be turned on if you specify true.
loop (true) You can turn off the loop If you specify false.
easing (swing) Custom easing function will be available when you use a plug-in, such as easing.
start (1) You can specify the initial display of the carousel.
group (1) You can specify the box to group the box to move at a time. When 3 For example, if one becomes a group of three in the box, there is a box total of eight, but the remainder is the last one, that part will be displayed in the blank.
duration (0.2) Specifies the number of seconds the time it takes to move.
indicator (false) If you want to use the indicator, you specify true. Indicator will be append after the element specified carousel.


API, such as advance-return the carousel can be accessed by specifying the name of the API in the first argument method all carousel. API available, please refer to the following table.

Name Commentary
indicator Returns a jQuery object that contains the HTML for the indicator. When set to true if an option is specified for the spit out immediately after the carousel element, you want to place in your favorite position please use this API.
getCurrent Returns the numeric You are here carousel is displaying. When you use the API indicator will change the position of the indicator used in combination.
getMoveState Returns false if there are fewer than the number of box view of the carousel that is displayed in the carousel, otherwise, it returns true. As a special case, the loop is off, if you are on page 1 to page if you are min, the last returns the max.
prev Back one page of the carousel.
next Forward one page of the carousel.
reset Revert to the state prior to the execution of the elements that you specify when you run the carousel. This must be done before you run, "refresh" API not only simply to initialize.
In addition, you can re-specify the option to run the second argument.
refresh Redraw the carousel again. run after the "reset" API.


If you use an event, you can do any processing, such as when the carousel was moved, was redrawn.

Events Commentary The carousel when the ignition has been moved to the next page.
Carousel.prev The carousel when the ignition has been moved to the prev page.
Carousel.reset The carousel when the ignition has been reset.
Carousel.refresh The carousel when the ignition has been refresh.

basic carousel

source code

var $carousel = $('#carousel_1').carousel();
$('#carousel_1_prev').on('click', function(ev) {
$('#carousel_1_next').on('click', function(ev) {

single view carousel with indicator and custom start

source code

var $carousel = $('#carousel_2').carousel({
  start: 2, // start setting
  indicator: true // indicator setting

// ...

group with indicator

source code

var $carousel = $('#carousel_3').carousel({
  group: 3, // group setting
  indicator: true

// ...

reset and refresh carousel, and binding event

Capable browsers


The MIT License

If you've found a bug, etc.

Please pull request to fork a github repository, if possible. I might be able to correspond to the time when there is a difficult case and get written on issues, someone may be able to support.

Regards use at your own risk!


Kazunori Tokuda -, @5509