slider

Accordion effect carousel with minimum jquery

A carousel configured and styled in such manner that is simulates an accordion like effect. Click on one of the Slide to slide it in focus, making it fully visible.

This carousel is created for your inspiration, using only the minimum jQuery-library. You may use it for free in all of your projects.

CSS

*{box-sizing:border-box;}
body{margin:0; padding:0;}
.slider{font-family: 'Slabo 27px', serif;}
.slider ul{list-style-type:none; margin:0; padding:0;}
.slider ul li{width:10%; float:left; color:#ffffff; padding:10px; transition: all 0.3s ease-in-out 0s; height:200px;}
.slider ul li div{padding-left:20px;}
.slider ul li h2{margin:0; font-size:20px; transition: all 0.3s ease-in-out 0s;}
.slider ul li.slide.active{width:70%;}
.slider ul li.slide.active h2{font-size:40px;}

/*Slide color*/
.slider ul li.slide.one{background-color:#cc0000;}
.slider ul li.slide.two{background-color:#0066cc;}
.slider ul li.slide.three{background-color:#ff3366;}
.slider ul li.slide.four{background-color:#009966;}

HTML

<div class="slider">
<ul>
<li class="slide one active">
<div><h2>Slide 1</h2></div>
</li>
<li class="slide two">
<div><h2>Slide 2</h2></div>
</li>
<li class="slide three">
<div><h2>Slide 3</h2></div>
</li>
<li class="slide four">
<div><h2>Slide 4</h2></div>
</li>
</ul>
</div>

jQuery

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
$(document).ready(function(){
$('.slide').click(function(){
$(this).addClass('active');
$(this).siblings().removeClass('active');
});
});
</script>


Please check live demo here