j查询轮播与图像功能

Question

我需要做这个滑块，我找到了一些代码并尝试了，但没有一个是完全像这样的

<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 是正确的方法。看起来您要自定义的下一件事是"中心"图像。创建一个以".slick-center"为目标的新 CSS 规则，并使用 transform：scale 来增加居中图像的大小。您可能还需要为".slick-list"创建一个CSS规则，并声明overflow：visible，以便新缩放的图像不会被外部容器裁剪。接下来你要自定义的是箭头的位置。您需要使用绝对定位将它们放置在轮播上方。箭头的类名通常是".slick-prev 和 .slick-next"。我建议在轮播之外添加一个父容器，并将其设置为相对定位。然后使用左、右、上、下的值将其放置在您想要的位置。祝你好运！