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-center"をターゲットとする新しいCSSルールを作成し、transform：scaleを使用して中央の画像のサイズを増やします。また、 ".slick-list"のCSSルールを作成し、オーバーフロー：可視を宣言して、新たにスケーリングされたイメージが外部コンテナによって切り取られないようにする必要があります。 次にカスタマイズするのは、矢印の位置です。カルーセルの上に配置するには、絶対配置を使用する必要があります。矢印のクラス名は通常 ".slick-prevと.slick-next"です。私はカルーセルの外側に親コンテナを追加し、それを相対位置に設定することをお勧めします。次に、左、右、上、下の値を使用して再生し、必要な場所に配置します。 幸運を祈る！