Accordion Style Collapsing Carousel Plugin With jQuery - Colcarou

Yet another accordion slider jQuery plugin used for generating an accordion style collapsing carousel where the slides will expand into full view when you click on the vertical title labels.

How to use it:

1. Load jQuery library and the jQuery Colcarou's JS & CSS files into the html file just as other plugins.

<link href="colcarou.css" rel="stylesheet">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="colcarou.js"></script>

2. Add your own text, images and any other html content into the collapsing carousel:

<div class="colcarou">
  <div>
      <div>
          <h1>Vadim Sherbakov</h1>
          <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="#">Vadim Sherbakov</a>
      </div>
      <img src="https://unsplash.it/1800/1200?image=193" alt="example1"/>
  </div>
  <div>
      <div>
          <h1>Andrea Boldizsar</h1>
          <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="#">Andrea Boldizsar</a>
      </div>
      <img src="https://unsplash.it/1800/1200?image=182" alt="example1"/>
  </div>
  <div>
      <div>
          <h1>Linh Nguyen</h1>
          <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="#">Linh Nguyen</a>
      </div>
      <img src="https://unsplash.it/1800/1200?image=174" alt="example1"/>
  </div>
</div>

3. Just call the function on the top element and the plugin will do the rest.

$('.colcarou').colcarou();

4. Default plugin settings.

$('.colcarou').colcarou({

  // width of title labels
  slide_width:70,

  // width / height of carousel
  frame_width:965,
  frame_height:450
  
});

Change log:

2016-10-15

• changed the header height
• some minor changes for not fullscreen view

---

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