jQuery.GI.Carousel.js

Responsive Slider Carousel optimized for touch devices

Tweet

Simple Demo


$('.demo1').GICarousel({
  arrows:true
});

Advanced Demo

  • ;) HTML content

    1. I am a list
    2. I am a list
    3. I am a list
    4. I am a list

$('.demo2').GICarousel({
  arrows:true,
  pagination:true,
  keyboardNavigation:true,
  carousel:true
});

Parallax Demo

  • ;) HTML content


$('.demo3').GICarousel({
  arrows:true,
  pagination:true,
  parallax:true
});

Options Available


var carousel = $('div.carousel').GICarousel({
  // Callbacks API
  onBeforeInit: null,
  onCarouselReady: null,
  onViewPortUpdate: null,
  onItemChange: null,
  onDestroy: null,
  // settings
  responsive: true,
  parallax: true,
  parallaxFactor: 0.3,
  carousel: false,
  arrows: false,
  pagination: false,
  controlsWrapper: null,
  closebutton: false,
  keyboardNavigation: true,
  stopScroll: false,
  animationSpeed: 300,
  fullscreen: false,
  startId: 0,
  resizeDebounce: 300,
  slidesOffsetRight: 0,
  autoSlideInterval: 0,
  stopAutoSlideOnInteraction: true,
  swipeSensibility: 100,
  nextButtonClass: '',
  prevButtonClass: '',
  closeButtonClass: ''
});

Public API

Public API methods