css - Slick - 上一个/下一个箭头停留在滑动轮播内

Question

使用光滑:http://kenwheeler.github.io/slick/

HTML

<div class="carsoule" style="overflow:hidden; width: 300px; height: 200px; margin: 0 auto; background:red">
     <div>
          <img src="http://theheightsanimalhospital.com/clients/15389/images/playful-kitten-6683.jpg" width="250">
     </div>
     <div>
          <img src="http://theheightsanimalhospital.com/clients/15389/images/playful-kitten-6683.jpg" width="250">
     </div>
</div>

CSS

.slick-prev, .slick-next {
     height: 55px;
     width: 55px;
}
.slick-prev {
     left: -80px;
     /*plan to add button image*/
}
.slick-next {
     right: -80px;
     /*plan to add button image*/
}

Jsfiddle Demo

试图覆盖，但上一个和下一个按钮仍然卡在轮播中。想要用按钮图像替换 css，按钮应该在轮播之外，就像 slick 网站上的示例一样。不知道我哪里出错了。

感谢帮助!

Answer 1

UPDATE : $('.carsoule').slickNext(); won't work anymore.

Use $('.carsoule').slick("slickNext"); instead.

https://github.com/kenwheeler/slick/issues/1613

查看此插件使用的 css，我注意到父容器应用了 overflow:hidden，因此您的箭头不会显示在父容器之外。

您可以在容器中添加额外的 overflow !important 规则，但是，我查看了一些可用于触发下一张/上一张幻灯片的方法，结果证明单击轮播容器外的某个类/ID 时，您可以调用轮播更改幻灯片。

所以基本上，在你的旋转木马之后(或者页面上的任何地方，如果它能帮助你的话)，添加两个 div/button/a/whatever 标签，然后添加一个 class 或 id to 使用以下方法调用 slider 以更改其幻灯片:slickNext() 或 slickPrev()

您可以将所有内容包装在一个主容器中，您的轮播和这两个额外的标签，并按照您想要的方式设置它们的样式。

查看 demo here ，以及下面使用的额外 js/标记:

<div class='next-button-slick'>
    next please
</div>
<div class='prev-button-slick'>
    prev please
</div>

$('.next-button-slick').click(function(){
    $('.carsoule').slickNext();
});
$('.prev-button-slick').click(function(){
    $('.carsoule').slickPrev();
});

更新 2

如果你想保留你的标记，而不添加任何额外的东西，你可以从容器中删除内联溢出:隐藏规则，或者通过带有 overflow: visible !important 的 css，和将这 2 个箭头设置为 position absolute，然后从那里开始工作。

查看 demo here 和下面的 css:

/*extra stuff*/
.carsoule{
    overflow: visible !important;
}
.slick-prev, .slick-next {
    position: absolute;
    background: red;
}