滑块内的容器会中断滑块 (Slick.js)

Question

我正在使用Slick Slider，一个非常通用的 JQuery 轮播插件。

但是，我想要实现的效果需要我在滑块中嵌套一个额外的元素。这个额外的元素最终会破坏滑块的功能。

这里是the page in question。注意我有一个模糊的after 伪元素阻塞了轮播的右侧（下图描述了当前的解决方法，而不是预期的效果）。

我希望使用隐藏溢出的子元素在右侧部分覆盖包含所有轮播 <li> 的 ul。

所以它看起来像这样：

<ul class="slick-slider">
   <div class="container">
    <div class="slick-list">
        <div class="slick-track">
         <li class="slick-slide">carousel item content</li>
         <li class="slick-slide">carousel item content</li>
         ...
        </div>
    </div>
   </div>
</ul>

和.container 会有类似的CSS

.container {overflow: hidden; display: block; width: 90%; border-right: 1px solid #fff;}

唯一的挑战是这会破坏轮播。 我已经尝试将溢出 CSS 应用到已经存在的 .slick-list 元素，但是当我这样做时，父元素会自动调整滑块中其他所有内容的大小。

关于如何让滑块忽略我想要嵌套的容器的任何想法？

编辑：这是我将溢出应用到父容器并自动调整大小的 gif（div.cardoverflow 在此示例中是 <ul> 的父级）。我还尝试通过将margin-left 添加到<ul> 来做到这一点，它仍然会自动调整大小。

Answer 1

首先，您不能将div 元素作为ul 的直接子元素。 Can I use div as a direct child of UL?

我不明白为什么你的容器不能在ul 之外，隐藏溢出？然后把箭头放在它们外面？

<div class="mainContainer">
    <button class="slick-prev-arrow" />
        <div class="container">
            <ul class="slider">
                 <li>slide1</li>
                 <li>slide2</li>
            </ul>
        </div>
    <button class="slick-next-arrow" />
</div>

请注意，Slick 允许您根据需要选择箭头元素，因此您可以将它们放置在 HTML 中的任何位置，它们甚至不必是按钮（尽管这可能更便于访问）。

$('ul.slider').slick({
    nextArrow:'.slick-next-arrow',
    prevArrow:'.slick-prev-arrow'
});