ColCarou
Collapsing Carousel JQuery Plugin
This Plugin creates a collapsing carousel via jquery
Author: Niclas Geiger
Requirements
JQuery needs to be loaded either via CDN or direct link in the header
Example:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>You also need to load either the minified or not-minified versions of the javascript-file and css-file
<script src="/PATH/TO/JS/colcarou.min.js" type="text/javascript"></script> <link href="/PATH/TO/CSS/colcarou.min.css" type="text/css" rel="stylesheet"/> <link href="/PATH/TO/CSS/colcarou.theme.min.css" type="text/css" rel="stylesheet"/>HTML
The Structure is very simple. You can create a new carousel in html like this:
<div id="slide"> <div> <div> <h2>header-text 1</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p> <a href="#">More</a> </div> <img src="/URL/TO/YOUR/IMAGE" alt="ALTTEXT"/> </div> <div> <div> <h2>header-text 2</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p> <a href="#">More</a> </div> <img src="/URL/TO/YOUR/IMAGE" alt="ALTTEXT"/> </div> ... </div>What you choose as id for the first slide does not matter. You are only required to use the same structure as shown
JQuery
You can instantiate your carousel with:
$(document).ready(function(){ $('#slide').colcarou(); });Options
The available options are:
| option | value (default) | description |
|---|---|---|
| slide_height | integer (450) | the (max) height of each carousel frame |
| slide_width | integer (70) | the width of each collapsed slide |
| auto_switch | boolean (false) | turn autoswitch on/off |
| switch_interval | integer (3000) | the interval for the autoswitch in ms |
| fullscreen | boolean (false) | if this frame should fill the whole screen or not (experimental!) |
| responsive_width | integer (800) | the minimun window width to display the carousel in responsive view |
Options can be set like this:
$(document).ready(function(){ $('#slide').colcarou({ slide_width:80, slide_height:400, autoswitch : true, switch_interval : 5000 }); });Future Tasks
- Implement JQuery UI events
Example
An example can be viewed here
Update Version 1.1 (14.10.2016)
- added responsive view
- added autoswitch panels
- added new parameters
