Implementing layered slides using angular pencil component with pencil
I am using angular-slick (jquery based slick based ) to control the carousel. I have a requirement to implement layerd slides i.e. Whereas one slide should be displayed and two slides should be displayed half hidden left and right. When you hit prev / nex, the bottom slide should be on top and the top slide should be on the bottom.
I tried to set it up using css / code but couldn't figure out how. Below are the layouts for my requirement. I also checked the sample provided at http://vasyabigi.github.io/angular-slick/
Please advice.
source to share
You have to do this with CSS transforms. Basically, this results in reducing inactive slides and giving them proper z-scores. For example:
$('.center').slick({
arrows: true,
centerMode: true,
infinite: true,
centerPadding: '250px',
slidesToShow: 1,
speed: 500,
dots: true,
});
.content {
width: 800px;
margin: auto;
background-color: #EBEBEB;
height: 480px;
}
.slick-slide:not(.slick-center) {
z-index: 0;
transform: scale(0.8);
}
.slick-active.slick-center+.slick-slide+.slick-slide {
z-index: 1;
}
.slick-active.slick-center+.slick-slide,
.slick-center+.slick-cloned {
z-index: 2;
}
.slick-center {
z-index: 3;
}
.slick-slide {
position: relative;
transition: transform 80ms;
}
.slide img {
position: relative;
transform: translateX(-50%);
left: 50%;
}
.slick-prev {
left: 10% !important;
}
.slick-next {
right: 10% !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://cdn.jsdelivr.net/jquery.slick/1.5.5/slick.css" rel="stylesheet" />
<link href="http://cdn.jsdelivr.net/jquery.slick/1.5.5/slick-theme.css" rel="stylesheet" />
<script src="http://cdn.jsdelivr.net/jquery.slick/1.5.5/slick.min.js"></script>
<div class="content">
<div class="center">
<div>
<div class="slide">
<img src="http://lorempixel.com/540/303/abstract" />
</div>
</div>
<div>
<div class="slide">
<img src="http://lorempixel.com/540/303/animals" />
</div>
</div>
<div>
<div class="slide">
<img src="http://lorempixel.com/540/303/business" />
</div>
</div>
<div>
<div class="slide">
<img src="http://lorempixel.com/540/303/cats" />
</div>
</div>
<div>
<div class="slide">
<img src="http://lorempixel.com/540/303/city" />
</div>
</div>
<div>
<div class="slide">
<img src="http://lorempixel.com/540/303/food" />
</div>
</div>
</div>
</div>
The example does not use angular-click, but the principle should be the same.
source to share