jq.carousel

Simple and customizable carousel

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

source code

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', '');
});

Other options and events

source code

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');
  }
});

single view with killed looping

var $carousel = $('#carousel_6').carousel({
    loop: false,
    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');
      break;
    case 'max':
      $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();
  }
});

group with killed looping

make carousel width variable with using reset(conf)

change carousel width:

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');
});