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
      }
    }
  ]
});

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

Answer 1

是的，我同意在“中心模式”中使用Slick是正确的方法。看起来您要自定义的下一件事是“中心”图像。创建一个以“.slick-center”为目标的新CSS规则，并使用transform：scale来增加居中图像的大小。您可能还需要为“.slick-list”创建CSS规则并声明overflow：visible，以便外部容器不会裁剪新缩放的图像。您要自定义的下一件事是箭头的位置。您需要使用绝对定位将它们放在旋转木马上方。箭头的类名通常是“.slick-prev和.slick-next”。我建议在转盘外添加一个父容器，并将其设置为相对定位。然后使用left，right，top，bottom值将其放置在您想要的位置。祝你好运！

带有图像功能的jQuery Carousel

1 个答案: