Jquery 滑块内的容器会打断滑块（Slick.js）

我正在使用一个非常通用的jquerycarousel插件

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

给你。请注意，我在旋转木马的右侧有一个模糊的

伪元素（下图描述了当前的解决方法，而不是期望的效果）


我希望在右侧使用隐藏溢出的子元素部分覆盖容纳所有旋转木马的
ul

所以它看起来像这样：


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

关于如何让滑块忽略要嵌套的容器，有什么想法吗

编辑：下面是我将溢出应用到父容器并自动调整大小的gif（在本例中，
div.cardoverflow
是
的父容器）。我还尝试通过在
中添加一个
左边距来实现这一点，它仍然会自动调整大小

首先，您不能将
div
元素作为
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>

首先，您不能将
div
元素作为
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>

没错。但是在
之外添加一个元素也会自动调整整个滑块的大小。我将在我的原始帖子中添加这张图片。添加了.gif以更好地说明我所指的自动调整大小。我使用负边距实现了您所需的功能，如下所示：请注意，我将您的元素转换为div，因为显然Slick并不真正支持列表元素，而不是在维护正确语法的情况下。如果这对你有效，我会更新我的答案，这是真的。但是在
之外添加一个元素也会自动调整整个滑块的大小。我将在我的原始帖子中添加这张图片。添加了.gif以更好地说明我所指的自动调整大小。我使用负边距实现了您所需的功能，如下所示：请注意，我将您的元素转换为div，因为显然Slick并不真正支持列表元素，而不是在维护正确语法的情况下。如果这对你有效，我会更新我的答案
<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>

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