jQuery Carousel Slider With Accordion Style Transitions
File Size: | 3.24 KB |
---|---|
Views Total: | 5596 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.