Super Flexible jQuery Content Slider / Carousel Plugin - slidekick

slidekick is an extremely flexible jQuery carousel plugin which allows to cycle through an element's child objects containing any Html content (i.e. images, text, etc).

How to use it:

1. Include the jQuery slidekick plugin's script after you have jQuery loaded.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/script.js"></script>

2. Wrap your Html content together with next/prev navigaiton & bottom pagination into a DIV container.

<div class="slideshow">
  <div class="btn btn_left"></div>
  <div class="shade shade_left"></div>
  <div class="viewport">
    <img src="1.jpg">
    <img src="2.jpg">
    <img src="3.jpg">
    <img src="4.jpg">
    <img src="5.jpg">
  </div>
  <div class="btn btn_right"></div>
  <div class="shade shade_right"></div>
  <div class="pagination"></div>
</div>

3. The required CSS to style the carousel.

.slideshow {
  position: relative;
  width: 100%;
  height: 300px;
  padding-bottom: 50px;
}

.slideshow .viewport {
  width: 900px;
  height: 300px;
  margin: 0 auto;
  overflow: hidden;
}

.slideshow .viewport img {
  width: 850px;
  height: 300px;
  margin: 0 25px;
}

.slideshow .shade {
  position: absolute;
  height: 300px;
  width: 25px;
  top: 0px;
  z-index: 2;
}

.slideshow .shade_left {
  left: 30px;
  background: url(style-images/shade.png) repeat 0 0;
}

.slideshow .shade_right {
  right: 30px;
  background: url(style-images/shade.png) repeat -25px 0;
}

.slideshow .btn {
  position: absolute;
  height: 60px;
  width: 30px;
  top: 120px;
  cursor: pointer;
}

.slideshow .btn_left {
  left: 0px;
  background: url(style-images/btn.png) repeat 0 0;
}

.slideshow .btn_right {
  right: 0px;
  background: url(style-images/btn.png) repeat -30px 0;
}

.slideshow .pagination ul { margin: 10px auto; }

.slideshow .pagination li {
  width: 12px;
  height: 12px;
  margin: 0px 5px;
  float: left;
  background: url(style-images/pag.png) repeat -12px 0;
  cursor: pointer;
}

.slideshow .pagination .active { background: url(style-images/pag.png) repeat 0 0; }

4. Initialize the carousel by calling the function on the parent element.

$('.slideshow').slidekick({

'viewport':'.viewport',
'pagination':'.pagination',
'speed':'slow',
'slideclass':'slide',
'slide_package':'div',
'left':'.btn_left',
'right':'.btn_right',
'loop':true,
'autoplay':true,
'pause_on_hover':true,
'onPause':function(){console.log('PAUSE!')},
'onResume':function(){console.log('RESUME!')},
'onNext':function(){console.log('next!')},
'onPrevous':function(){console.log('prev!')}

});

5. All the parameters.

$('.slideshow').slidekick({

//default values

'container' = null;
'container_w' = $('container).outerWidth(true);
'viewport' = null;
'content' = null;
'pagination' = null;
'left' = null;
'right' = null;

'container_class' = '';
'viewport_class' = '.slidekick-viewport';
'content_class' = '.slidekick-content';
'pagination_class' = '.slidekick-pagination';
'left_class='.slidekick-left';
'right_class='.slidekick-right';

'responsive' = false;
'speed' = 'normal';
'rows' = 1;
'cols' = 1;
'vertical' = false;
'loop' = false;
'pag_content' = '';
'pag_enum' = false;
'packslides' = true;
'slide_package' = 'ul';
'slideclass' = 'slide';
'tidy' = false; //presume you do not keep things tidy!

'timer' = null;
'last_time' = 0;
'pause_time' = 0;
'pause_timer' = null;
'time' = 8000;
'direction' = 'l2r';
'pause_on_hover' = false;
'autoplay_enabled' = false;
'recalc_pag_dimensions' = true;

'onPause' = function(){};
'onResume' = function(){};
'onNext' = function(){};
'onPrevous' = function(){};

});

---

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