滑块中的容器打破滑块（Slick.js）

Question

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

然而，我想要完成的效果要求我在滑块中嵌套一个额外的元素。这个额外的元素最终破坏了滑块的功能。

这是the page in question。请注意我有一个模糊的after伪元素阻挡旋转木马的右侧（下图描绘了当前的解决方法，而不是所需的效果）。

我希望使用隐藏溢出的子元素在右侧部分覆盖所有轮播ul的{​​{1}}。

所以它看起来像这样：

<li>

和<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> 会有像

这样的CSS

.container

唯一的挑战是打破旋转木马。 我已经尝试将溢出CSS应用于现有的.container {overflow: hidden; display: block; width: 90%; border-right: 1px solid #fff;} 元素，但是当我这样做时，父元素会自动调整滑块中的所有其他内容。

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

编辑：这是我将溢出应用于父容器的gif，它会自动调整大小（.slick-list是此示例中div.cardoverflow的父级）。我还试图通过向<ul>添加margin-left来执行此操作，但它仍会自动调整大小。

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