javascript - 如何在光滑的 slider 中扩展悬停幻灯片的宽度并为第一项设置间距？

Question

我正在尝试做一个类似 netflix 的 slider ，但具有不同的悬停效果。这是模型的外观 https://pasteboard.co/IGwDwLE.png

我也想知道为什么在我为 slidesToShow 配置设置 variablewidth:true 后它会消失。

我还希望第一个元素有一个间距，当用户点击下一个元素时，我会像这样填充那个空间 https://pasteboard.co/IGwFVmy.png

我有这个光滑的 slider 配置。

        $('.slider-inner').slick({
            dots: true,
            infinite: true,
            cssEase: 'linear',
            slidesToShow: 5,
            slidesToScroll: 5,
            arrows: true,
        });

Answer 1

CSS伪类:hover可用于定义 slider 悬停时元素的样式，负的右边距可以实现第一个元素的定位效果。

使用slick.js时，注意以下几点:

• slider 中的元素被赋予类 slick-slide。使用它来定位样式表中的 slider 元素。
• 在 slick-min.css 和 slick-theme-min.css 之后插入您自己的 CSS，以便您的自定义样式覆盖默认样式。
• 如果您使用 variableWidth: true，请定义幻灯片元素的宽度。

这是一个例子:

$('.slider-inner').slick({
    dots: true,
    infinite: true,
    cssEase: 'linear',
    arrows: true,
    variableWidth: true,
});

.slider-outer {
  margin: 0 auto;
  padding: 30px;
  width: 70%;
  background: #ccc;
}
.slick-slide {
  text-align: center;
  color: #ccc;
  background: white;
  border-left: 2px solid #ccc;
  width: 91px;
}
.slick-slide:hover {
  width: 130px;
  color: red;
  transition: .5s linear;
}
.first {
  margin-right: -50px; 
}
.first:hover {
  margin-right: 0px;
  transition: .5s linear;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.min.css" rel="stylesheet"/>

<div class='slider-outer'>
  <div class='slider-inner'>
    <div class='first'><h3>1</h3></div>
    <div><h3>2</h3></div>
    <div><h3>3</h3></div>
    <div><h3>4</h3></div>
    <div><h3>5</h3></div>
    <div><h3>6</h3></div>
    <div><h3>7</h3></div>
    <div><h3>8</h3></div>
    <div><h3>9</h3></div>
    <div><h3>10</h3></div>
  </div>
</div>