Responsive & Touch-Friendly jQuery Carousel Plugin - GI.Carousel.js

GI.Carousel.js is a lightweight jQuery plugin for creating a fully responsive and mobile-optimized slider carousel on your website.

Features:

• Supports any Html elements, not only images.
• Keyboard, touch swipe navigation.
• Fully responsive for desktop, mobile and tablet.
• Auto slide at a certain interval.
• Endless loop as a carousel.
• Supports fullscreen modes.
• Custom parallax effects.
• Callbacks and methods supported.

Basic Usage:

1. Create the markup structure for a slider carousel as follows.

<div class="GICarousel demo GI_C_wrapper">
  <ul class="GI_IC_items">
    <li style="background-image:url('1.jpg')"></li>
    <li>Text</li>
    <li>iFrame</li>
    ...
  </ul>
</div>

2. Add the following CSS snippets in your existing CSS file to style the carousel.

.GI_C_prev,
.GI_C_next { line-height: 0; }

.GI_C_prev:after,
.GI_C_next:after {
  position: absolute;
  top: 14px;
  left: 8px;
}

.GI_C_prev:after { content: '\003c'; }

.GI_C_next:after { content: '\003e'; }

.GICarousel {
  padding: 0;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: absolute;
  z-index: 99;
}

.GICarousel ul {
  padding: 0;
  margin: 0;
  list-style: none;
  display: none;
}

.GICarousel .GI_Controls { z-index: 110; }

.GICarousel .GI_Controls.GI_C_disabled {
  opacity: 0.3;
  cursor: default;
}

.GICarousel .GI_C_close {
  position: absolute;
  top: 0;
  right: 0;
  background: red;
  width: 50px;
  height: 50px;
}

.GICarousel .GI_C_prev,
.GICarousel .GI_C_next {
  position: absolute;
  background: white;
  font-style: normal;
  top: 50%;
  margin: -15px 0 0 0;
  width: 30px;
  height: 30px;
  cursor: pointer;
}

.GICarousel .GI_C_prev { left: 0; }

.GICarousel .GI_C_next { right: 0; }

.GICarousel.GI_C_wrapper {
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: absolute;
}

.GICarousel.GI_C_wrapper ul.GI_C_items {
  height: 100%;
  width: 100%;
  display: block;
  position: absolute;
}

.GICarousel.GI_C_wrapper ul.GI_C_items.animated {
  -webkit-transition: left 0.4s ease-in-out;
  -moz-transition: left 0.4s ease-in-out;
  -o-transition: left 0.4s ease-in-out;
  transition: left 0.4s ease-in-out;
}

.GICarousel.GI_C_wrapper ul.GI_C_items.animated .parallax {
  -webkit-transition: margin 0.8s cubic-bezier(0.19, 1, 0.22, 1);
  -moz-transition: margin 0.8s cubic-bezier(0.19, 1, 0.22, 1);
  -o-transition: margin 0.8s cubic-bezier(0.19, 1, 0.22, 1);
  transition: margin 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}

.GICarousel.GI_C_wrapper ul.GI_C_items li {
  height: 100%;
  width: 100%;
  display: block;
  float: left;
  z-index: 100;
  position: relative;
  overflow: hidden;
}

.GICarousel.GI_C_wrapper ul.GI_C_items li img { width: 100%; }

.GICarousel.GI_C_wrapper ul.GI_C_items li.current { z-index: 105; }

.GICarousel.GI_C_wrapper ul.GI_C_paginator {
  height: 48px;
  bottom: 0;
  width: 100%;
  display: block;
  position: absolute;
  text-align: center;
  z-index: 110;
  background: rgba(0, 0, 0, 0.2);
}

.GICarousel.GI_C_wrapper ul.GI_C_paginator li {
  width: 13px;
  height: 13px;
  cursor: pointer;
  margin: 18px;
  display: inline-block;
  _display: inline;
  background: gray;
  border: 1px solid rgba(0, 0, 0, 0.1);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;
  border-radius: 100%;
}

.GICarousel.GI_C_wrapper ul.GI_C_paginator li.active { background: white; }

3. Include the necessary jQuery javascript library and the jQuery GI.Carousel.js plugin at the end of the web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jQuery.GI.Carousel.js"></script> 

4. Initialize the carousel with default settings.

$('.demo').GICarousel();

5. Available options with defaults.

// Callbacks API
onBeforeInit: null,
onReady: null,
onViewPortUpdate: null,
onItemChange: null,
onDestroy: null,
// settings
responsive: true,
parallax: true,
parallaxFactor: 0.5,
carousel: false,
arrows: false,
pagination: false,
controlsWrapper: null,
closebutton: false,
keyboardNavigation: false,
stopScroll: false,
animationSpeed: 300,
fullscreen: false,
startId: 0,
resizeDebounce: 300,
slidesOffsetRight: 0,
autoSlideInterval: 0,
stopAutoSlideOnInteraction: true,
swipeSensibility: 100,
nextButtonClass: '',
prevButtonClass: '',
closeButtonClass: ''

6. 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
• 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

Change log:

2016-09-06

• Make responsive options work if there is just one slide

v0.3.3 (2014-07-04)

• update.

---

This awesome jQuery plugin is developed by Goldinteractive. For more Advanced Usages, please check the demo page or visit the official website.