jQuery Carousel Plugin with Accordion Behavior - Accarousel

Accarousel is a jQuery plugin used to create a smooth, expandable carousel from a list of images. When you click on a thumbnail, it zooms out to the overall carousel size to display the original version of the image like an accordion.

More features:

• Multiple images on one slide.
• jQuery easing support.
• Pagination & arrows navigation.
• Smooth scrolling effect.

How to use it:

1. Create a list of images for the carousel.

<div id="accarousel">
  <ul>
    <li> <a href="" class="stand"><img src="thumb1.jpg" alt="Thumbnail"/></a>
      <div class="detail-panel"><img src="large1.jpg" alt="Fullsizel></div>
    </li>
    <li> <a href="" class="stand"><img src="thumb2.jpg" alt="Thumbnail"/></a>
      <div class="detail-panel"><img src="large2.jpg" alt="Fullsizel></div>
    </li>
    <li> <a href="" class="stand"><img src="thumb3.jpg" alt="Thumbnail"/></a>
      <div class="detail-panel"><img src="large3.jpg" alt="Fullsizel></div>
    </li>
    <li> <a href="" class="stand"><img src="thumb4.jpg" alt="Thumbnail"/></a>
      <div class="detail-panel"><img src="large4.jpg" alt="Fullsizel></div>
    </li>
    <li> <a href="" class="stand"><img src="thumb5.jpg" alt="Thumbnail"/></a>
      <div class="detail-panel"><img src="large5.jpg" alt="Fullsizel></div>
    </li>
    ...
  </ul>
</div>

2. Load jQuery library and the jQuery Accarousel plugin at the end of the document.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="dist/jquery.Accarousel.min.js"></script>

3. Load the jQuery easing plugin for more easing methods (OPTIONAL).

<script src="jquery.easing.min.js"></script>

4. The core CSS styles for the carousel.

#accarousel {
  margin: 60px auto;
  width: 960px;
  height: 365px;
  position: relative;
}

#accarousel .inner-mask {
  overflow: hidden;
  margin: 0 auto;
  height: 285px;
}

#accarousel .inner-mask.expanded { overflow: visible; }

#accarousel ul {
  margin: 0;
  padding: 0;
}

#accarousel ul li {
  list-style: none;
  float: left;
  height: 285px;
  width: 189px;
  padding: 0 3px 0 0;
}

#accarousel ul li.disabled a {
  cursor: text;
  opacity: 0.6;
  filter: alpha(opacity=60);
}

#accarousel ul li .stand {
  display: block;
  width: 100%;
  height: 285px;
  font-size: 80px;
  line-height: 258px;
  text-align: center;
  background: #000;
}

#accarousel ul li .detail-panel {
  position: absolute;
  left: 50%;
  top: 0;
  height: 384px;
  width: 0;
  margin: -50px 0 0 0;
  z-index: 9999;
  overflow: hidden;
}

#accarousel ul li .detail-panel img {
  width: 100%;
  height: 100%;
}

#accarousel .pager {
  float: right;
  margin: 30px 4px 20px 0;
}

#accarousel .pager li {
  float: left;
  list-style: none;
  margin: 0 0 0 4px;
}

#accarousel .pager li a {
  display: block;
  color: #222;
  border: 1px solid #e0e0e0;
  background: #fafafa;
  font-size: 12px;
  padding: 5px 8px;
}

#accarousel .pager li a:hover,
#accarousel .pager li a.active {
  background: #d0d0d0;
  border-color: #b0b0b0;
}

#accarousel .pager li a.disabled,
#accarousel .pager li a.disabled:hover {
  border-color: #e0e0e0;
  background: #fafafa;
  font-style: italic;
  cursor: text;
  opacity: 0.6;
  filter: alpha(opacity=60);
}

#accarousel .pager.disabled li a,
#accarousel .pager.disabled li a.disabled,
#accarousel .pager.disabled li a.disabled:hover {
  border-color: #e0e0e0;
  background: #fafafa;
  font-style: italic;
  cursor: text;
  opacity: 0.6;
  filter: alpha(opacity=60);
}

5. These are default plugin settings.

// Visible stands element
stand: '.stand', 

// Expandable element  
panel: '.detail-panel', 

// Pager CSS Class
pagerClass: 'pager', 

// Panel Collapse handler
x: '.detail-panel', 

// Number of stands for visible group*/
groupOf: 5, 

// Carousel Speed
scrollSpeed: 1000, 

// Use jQuery Easing Plug in for more easing effects
ease: 'swing', 

// Gap between expanded and other two flyouts
flyOutGap: 3, 

// set false to disable Next/Prev Nav
nextPrev: true 

---

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