css – 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

试图覆盖,但prev和下一个按钮卡在旋转木马内.想要用按钮图像替换css,按钮应该在旋转木马外面,就像光滑网站上的例子一样.无法想象我哪里出错了.

帮助赞赏！

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

Use $(‘.carsoule’).slick(“slickNext”); instead.

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

看看这个插件使用的css,我注意到父有溢出：隐藏应用于它,所以你的箭头不会显示在父容器之外.

您可以在容器中添加额外的溢出！重要规则,但是,我已经查看了一些可用于触发next / prev幻灯片的方法,并且证明您可以调用旋转木马来更改幻灯片,当点击轮播容器外的某个类/ id时.

所以基本上,在你的轮播之后(或页面上的任何地方,如果它可以帮助你),添加两个div / button / a / whatever标签,并添加一个类或id来调用滑块来改变它的幻灯片：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

如果你想保留你的标记,而不是添加任何额外的东西,你可以从容器中删除内联溢出：隐藏规则,或者通过带溢出的css：visible！important,并将这2个箭头设置为绝对位置,并且工作你从那里开始.

查看demo here和下面的css：

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