can not implement this type of slider by slick slider

Question

I try to use slick slider, but how I understand Slick have not special setting to create that effect, when active image is over another with another's negative margin This is the example in figma, is there any method to select z-index to center image, like here on image???

Answer 1

Use .slick-center on centerMode . A such:

.slick-active.slick-center {
     z-index: 1;
     position: relative;
}

 $('.center').slick({ centerMode: true, centerPadding: '60px', slidesToShow: 3, focusOnSelect: true, responsive: [ { breakpoint: 768, settings: { arrows: false, centerMode: true, centerPadding: '40px', slidesToShow: 3 } }, { breakpoint: 480, settings: { arrows: false, centerMode: true, centerPadding: '40px', slidesToShow: 1 } } ] });

 .center.slick-center h3 { -moz-transform: scale(1.08); -ms-transform: scale(1.08); -o-transform: scale(1.08); -webkit-transform: scale(1.08); opacity: 1; transform: scale(1.15); border: 3px solid red; color: red; background: #fff; }.slick-active.slick-center { z-index: 1; position: relative; }.center h3 { opacity: 0.4; transition: all 300ms ease; text-align: center; line-height: 100px; border: 3px solid #000; color: #333; }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" rel="stylesheet"/> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" integrity="sha512-17EgCFERpgZKcm0j0fEq1YCJuyAWdz9KUtv1EjVuaOz8pDnh/0nZxmU6BBXwaaxqoi9PQXnRWqlcDB027hgv9A==" crossorigin="anonymous" /> <div class="slider center"> <div> <h3>1</h3> </div> <div> <h3>2</h3> </div> <div> <h3>3</h3> </div> <div> <h3>4</h3> </div> <div> <h3>5</h3> </div> <div> <h3>6</h3> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>