Carousel Image Slider with Accordion Style Transitions jQuery

How to make use of it:

1. Add slides along with pagination/navigation controls to the accordion carousel.

<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 needed 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 individual 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 next JavaScript snippet after the jQuery library.

<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");
          }
      }
  });
});

jQuery Carousel Slider With Accordion Style Transitions, image slider jquery Plugin/Github, accordion slider html

See Demo And Download