jQuery Carousel Slider With Accordion Style Transitions

A jQuery slider carousel script that enables you to switch between images with smooth expand/collapse transitions just like an accordion.

More Features:

• Supports any content types, not only images.
• Navigation arrows and pagination bullets.
• Infinite Loop and Auto Rotation.
• Slides can be expanded or closed individually.
• Responsive Design and Mobile compatible.

How to use it:

1. Add slides together with pagination/navigation controls to the accordion carousel. In this example, we use Font Awesome Iconic font for the navigation arrows.

<section>
  <span class="prev fas fa-chevron-left"></span>
  <main>
    <div class="one a"  alt=""></div>
    <div class="two" alt=""></div>
    <div class="three"  alt=""></div>
    <div class="four"  alt=""></div>
    <div class="five"  alt=""></div>
  </main>
  <span class="next fas fa-chevron-right"></span>
</section>
<ul class="slide">
  <li class="oned b"></li>
  <li class="twod"></li>
  <li class="thred"></li>
  <li class="fourd"></li>
  <li class="fived"></li>
</ul>

2. The necessary styles for the accordion carousel.

section {
  width: 80%;
  margin: 0 auto;
  padding: 2em;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

span {
  font-size: 2em;
  cursor: pointer;
}

main {
  width: 80%;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

main div {
  width: 10%;
  height: 350px;
  border-radius: 50px;
  cursor: pointer;
}

.slide {
  list-style: none;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.slide li {
  padding: 10px;
  border: 2px solid #1c1c1c;
  border-radius: 50%;
  margin-right: 0.8em;
}

.fived{
  margin-right: 0;
}

.a {
  width: 50%;
}

.b {
  background-color: #1c1c1c;
}

.c {
  pointer-events: none;
}

3. Apply your own styles to the slides.

.one {
  background-color: #3d5a80;
}

.two {
  background-color: #98c1d9;
}

.three {
  background-color: #e0fbfc;
}

.four {
  background-color: #ee6c4d;
}

.five {
  background-color: #293241;
}

4. Place the following JavaScript snippet after jQuery library and done.

<script src="/path/to/cdn/jquery.min.js"></script>

$(function(){

  let i=0;
  function change(){  
      ++i;
      $($("main div")[i-1]).animate({width:"10%"},0.01).removeClass("a");
      $($('.slide li')[i-1]).removeClass("b");
      if(i==5){
          i=0;
      }
      $($("main div")[i]).animate({width:"50%"}).addClass("a");
      $($('.slide li')[i]).addClass("b");
  }
  var a=setInterval(change,2000);
  
  let j=0;    
  $('main div').click(function(){
      clearInterval(a);
      j=$(this).index();
      if(j!=0 || j!=4){
          $('span').removeClass('c');
      }
      if($(this).hasClass("a")){}
      else{
          $('main div').animate({width:"10%"},0.5).removeClass('a');
          $('.slide li').removeClass('b');
          $(this).animate({width:"50%"},200).addClass('a');
          $( $('.slide li')[$(this).index()] ).addClass('b');
      }
  });
  
  $('span').click(function(){
      clearInterval(a);
      j=$('.a').index();
      if(j==0 && $(this).hasClass('prev')){
          $($('main div')[0]).animate({width:"10%"},0.01).removeClass("a")
          $($('.slide li')[0]).removeClass("b");
          $($('main div')[4]).animate({width:"50%"},200).addClass("a")
          $($('.slide li')[4]).addClass("b");
      }
      else if(j==4 && $(this).hasClass('next')){
          $($('main div')[4]).animate({width:"10%"},0.01).removeClass("a")
          $($('.slide li')[4]).removeClass("b");
          $($('main div')[0]).animate({width:"50%"},200).addClass("a")
          $($('.slide li')[0]).addClass("b");
      }
      else{
          if($(this).hasClass("prev")){
              $($('main div')[j]).animate({width:"10%"},0.01).removeClass("a")
              $($('.slide li')[j]).removeClass("b");
              $($('main div')[j-1]).animate({width:"50%"},200).addClass("a")
              $($('.slide li')[j-1]).addClass("b");
          }
          else{
              $($('main div')[j]).animate({width:"10%"},0.01).removeClass("a")
              $($('.slide li')[j]).removeClass("b");
              $($('main div')[j+1]).animate({width:"50%"},200).addClass("a")
              $($('.slide li')[j+1]).addClass("b");
          }
      }
          
  });

});

---

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