Super Flexible jQuery Content Slider / Carousel Plugin - slidekick
File Size: | 14.1 KB |
---|---|
Views Total: | 1089 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.