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

Question

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

我也想知道为什么一旦我为 slidesToShow 配置设置了 variablewidth:true 它就消失了。

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

我有这个光滑滑块的配置。

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

Answer 1

试试这个

centerMode: true,
centerPadding: '60px'

Live slick Demo

Answer 2

您可以使用slick js的以下设置来实现模型设计

中心模式 - 启用部分 prev/next 幻灯片的居中视图。使用奇数 slidesToShow 计数。
centerPadding - 居中模式下的侧边距（px 或 %），默认值设置为 50px。

您可以在下面找到所有漂亮的配置link

https://kenwheeler.github.io/slick#settings

示例

$(".single-item").slick({
   centerMode: true,
   centerPadding: '40px',
   slidesToShow: 3  
});

您可以查看下面的实例link

https://jsfiddle.net/afz0os4w/

Answer 3

CSS伪class:hover可以用来定义滑块悬停时元素的样式，负的右边距可以实现第一个的定位效果元素.

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

滑块中的项目被赋予 class slick-slide。用它来定位样式表中的滑块元素。
在 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>

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

How to expand width of hovered slide in slick slider and set spacing for the first item?

javascript

css

slick.js