带有图像功能的 jQuery 轮播

Question

我需要做这个 slider ，我找到了一些代码并尝试了，但没有一个完全是 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
      }
    }
  ]
});

我用了 Slick http://kenwheeler.github.io/slick/ ，我在箭头设计方面遇到了一些问题，并且图像没有特色。

Answer 1

是的，我同意在“中心模式”下使用 Slick 是正确的方法。看起来您接下来要自定义的是“中心”图像。创建一个以“.slick-center”为目标的新 CSS 规则，并使用 transform:scale 来增加居中图像的大小。您可能还需要为“.slick-list”创建一个 CSS 规则并声明溢出:可见，以便新缩放的图像不会被外部容器裁剪。接下来您要自定义的是箭头的位置。您需要使用绝对定位将它们放置在轮播上方。箭头的类名通常是“.slick-prev 和.slick-next”。我建议在轮播外添加一个父容器并将其设置为相对定位。然后使用左、右、上、下值将其放置在您想要的位置。祝你好运!