使用角度光滑旋轉木馬組件實現分層幻燈片

Question

我正在使用angular-slick（它基於jQuery基於slick）來實現旋轉木馬控制。我有要求實施分層的幻燈片，即一次應該顯示一張幻燈片，並且應該在左側和右側顯示兩張幻燈片。點擊上一頁下一頁幻燈片應該在頂部，頂部應該在底部。

我試圖使用CSS /代碼來定製它，但無法弄清楚如何去做。以下是我的需求模型。我也檢查了樣品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>

的示例沒有使用角光滑，但原則應該是相同的。