jQuery.GI.Carousel.js
Responsive Slider Carousel optimized for touch devices
TweetSimple Demo
$('.demo1').GICarousel({
arrows:true
});
Advanced Demo
-
;) HTML content
- I am a list
- I am a list
- I am a list
- 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
-
setViewport
Resize all the carousel elements according to the parent wrapper
-
startAutoslide
Setup the autoslide according to the interval passed to the plugin
-
stopAutoslide
Stop the autoslide timer
-
moveToSlide(index)
Move the carousel to any slide
- index {int} : it is the index of the slide you would like to show
-
next
Move to the next slide -
prev
Move to the previous slide -
bindAll
Bind all the plugin events -
unbindAll
Remove all the plugin events -
destroy
Remove all the plugin events and the plugin DOM elements