jQuery的旋轉木馬在功能

Question

形象，我需要做這個滑塊和我已經找到了一些代碼和嘗試，但沒有一個是準確LIKE THIS

<div class="bloco03 center" id="bloco03"> 
    <div><img src="images/clientes/image06.jpg"></div> 
    <div><img src="images/clientes/image07.png"></div> 
    <div><img src="images/clientes/image06.jpg"></div> 
    <div><img src="images/clientes/image07.png"></div> 
    <div><img src="images/clientes/image06.jpg"></div> 
    <div><img src="images/clientes/image07.png"></div> 
    <div><img src="images/clientes/image06.jpg"></div> 
</div> 

.bloco03 img { 
    width: 100%; 
} 

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

我用油滑http://kenwheeler.github.io/slick/，我曾與設計的幾個問題的箭頭和圖像沒有特色。

Answer 1

是的，我同意在「中心模式」下使用Slick是正確的方法。 它看起來像你想要定製的下一件事是「中心」圖像。 創建一個新的CSS規則，其目標是「.slick-center」，並使用transform：scale來增加居中圖像的大小。您可能還需要爲「.slick-list」創建CSS規則並聲明overflow：visible，以便新縮放的圖像不會被外部容器裁剪。 您要自定義的下一件事是箭頭的位置。你會想要使用絕對定位將它們放置在旋轉木馬上方。箭頭的類名稱通常是「.slick-prev和.slick-next」。我建議在轉盤之外添加一個父容器並將其設置爲相對定位。然後使用左側，右側，頂部，底部值將其放在您想要的位置。 祝你好運！