Press "Enter" to skip to content

jQuery plugin with Accordion and Carousel | Accarousel

Accarousel jQuery plugin with Accordion and Carousel behavior. This plugin consists of a circular behavior and an accordion. Another advantage is that it pops out from the more closed sibling elements on the outside and hides the rest when the accordion is stretched.

accordion slider jquery, responsive horizontal accordion jquery, responsive accordion jquery, css accordion slider, responsive horizontal accordion slider

features:

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

How to make use of 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 the jQuery library and jQuery Accarousel plug-in.

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

3. Load the jQuery mitigation plugin for more convenience.

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

4. Basic CSS Styles for 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 the 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 

jquery carousel plugin with accordion, Accarousel Plugin/Github, jquery accordion without plugin


See Demo And Download

Official Website(expiredqueues): Click Here

This superior jQuery/javascript plugin is developed by expiredqueues. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *