Implementación de diapositivas en capas utilizando el componente de carrusel pulido angular

Estoy usando angular-slick (que se basa en slick based slick ) para implementar el control de carrusel. Tengo el requisito de implementar las diapositivas layerd, es decir, en un momento se debe mostrar una diapositiva y las dos diapositivas se deben mostrar medio ocultas a la izquierda y la derecha. Al hacer clic en prev / nex, la diapositiva inferior debe aparecer en la parte superior y la superior debe ir debajo.

Estaba tratando de personalizarlo usando css / code, sin embargo no pude averiguar cómo hacerlo. A continuación hay maquetas para mi requerimiento. También revisé la muestra dada en http://vasyabigi.github.io/angular-slick/ introduzca la descripción de la imagen aquí

Por favor aconséjame.

Deberías poder hacer esto a través de transformaciones CSS. Básicamente, reducir el tamaño de las diapositivas inactivas y darles los índices z adecuados resulta en este efecto. Por ejemplo:

$('.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; }