jq.carousel

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.

Looping

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

Indicator

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.

Events

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

Download

You can download the source code from Github.

• Download jq.carousel.js

Implementation

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.

HTML

<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>
  </div>
  <p class="btns">
    <input type="button" id="carousel_prev" value="prev">
    <input type="button" id="carousel_next" value="next">
  </p>
</div>

CSS

#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%;
}

JavaScript

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

Options

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.

APIs

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.

Events

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

basic carousel

source code

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

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

var $carousel = $('#carousel_4').carousel({
    group: 4,
    indicator: true
  }),
  $prev = $('#carousel_4_prev'),
  $next = $('#carousel_4_next'),
  num = 1;

$('#carousel_4_add').on('click', function(ev) {
  $carousel.carousel('reset');
  $carousel.append('<div class="carousel_box">' + (++num) + '</div>');
  $carousel.carousel('refresh');
});

// ...

$carousel.bind('Carousel.refresh', function() {
  if ( !$carousel.carousel('getMoveState') ) {
    return;
  }
  $prev.prop('disabled', '');
  $next.prop('disabled', '');
});

var $carousel = $('#carousel_5').carousel({
  indicator: true,
  easing: 'linear', // easing
  duration: 0.5 // move duration
});

// ...

$carousel.bind({
  'Carousel.next': function() {
    alert('moved to next');
  },
  'Carousel.prev': function() {
    alert('moved to prev');
  }
});

var $carousel = $('#carousel_6').carousel({
    loop: false,
    start: 2,
    indicator: true
  }),
  $prev = $('#carousel_6_prev'),
  $next = $('#carousel_6_next'),
  set_state = function() {
    var state = $carousel.carousel('getMoveState');
    switch ( state ) {
    case 'min':
      $prev.prop('disabled', 'disabled');
      $next.prop('disabled', '');
      break;
    case 'max':
      $prev.prop('disabled', '');
      $next.prop('disabled', 'disabled');
      break;
    case true:
      $prev.prop('disabled', '');
      $next.prop('disabled', '');
      break;
    default:
      $prev.prop('disabled', 'disabled');
      $next.prop('disabled', 'disabled');
    }
  };

// ...

$carousel.bind({
  'Carousel.next': function() {
    set_state();
  },
  'Carousel.prev': function() {
    set_state();
  }
});

var $carousel = $('#carousel_8').carousel({
    group: 3,
    indicator: true
  }),
  $select = $('#carousel_8_select'),
  // ...

// ...

$select.on('change', function() {
  var val = this.value,
    group = val / 200;

  // if carousel width is changed?
  $carousel.css('width', val);
  $carousel.carousel('reset', {
    group: group
  });
  $carousel.carousel('refresh');
});

var $carousel = $('#carousel_9').carousel({
  vertical: true,
  group: 2
});

var $carousel = $('#carousel').carousel({
  indicator: true,
  duration: 0.3
});

setInterval(function() {
  $carousel.carousel('next');
}, 3000);

Capable browsers

• IE6+
• and modern browsers
• Mobile Safari

License

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!

Author

Kazunori Tokuda - http://5509.me, @5509