Внедрение слоистых слайдов с использованием углового пятнистого компонента карусели

Question

Я использую angular-slick (основанный на jQuery slick) для управления карусели. У меня есть требование реализовать слайды layerd, т. Е. В то время как один слайд должен отображаться, а два слайда должны отображаться наполовину скрытыми слева и справа. При нажатии prev/nex нижний слайд должен быть сверху, а верхний - нижним.

Я пытался настроить его, используя css/code, но не смог понять, как это сделать. Ниже приведены макеты для моего требования. Я также проверил образец, приведенный по адресу http://vasyabigi.github.io/angular-slick/

Прошу совета.

Answer 1

Вы должны сделать это с помощью CSS-преобразований. В основном, это приводит к уменьшению неактивных слайдов и предоставлению им надлежащих z-индексов. Например:

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

В примере не используется угловой гладким, но принцип должен быть одинаковым.