具有图像功能的 jQuery Carousel答案

【问题标题】：jQuery Carousel with image in feature具有图像功能的 jQuery Carousel
【发布时间】：2017-04-11 21:16:14
【问题描述】：

我需要做这个滑块，我找到了一些代码并尝试过，但没有一个是完全正确的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/ ，我在箭头设计方面遇到了一些问题，并且图像没有特色。

【问题讨论】：

标签： jquery html css slider carousel

【解决方案1】：

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

【讨论】：