光滑 - 上一个/下一个箭头卡在滑动转盘内

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演示

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

帮助赞赏!

Answer 1

更新:$('.carsoule').slickNext(); 将不再工作.

使用$('.carsoule').slick("slickNext"); 代替.

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

看着这个插件使用的CSS,我发现父母已经overflow:hidden应用到它,所以你的箭不会显示超出了父母容器.

你可以乱用添加额外的overflow !important规则到容器,但是,我在一些方法,你可以用它来触发下一个/上一张幻灯片看了过来,和原来你可以叫你的转盘更改幻灯片,点击时转盘容器外的某个类/ id.

所以基本上,在您的轮播之后(或页面上的任何位置,如果它可以帮助您),添加两个div/button/a/whatever标签,并在滑块上添加一个class或id to调用以使用以下方式更改其幻灯片:slickNext()或者slickPrev()

您可以将所有内容包装在主容器,旋转木马和这两个额外的标签中,并按照您想要的方式设置样式.

在这里查看演示,以及下面使用的额外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 overflow: visible !important,并将这两个箭头设置为position absolute,并从那里开始工作.

看看这里的演示和下面的css:

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

Answer 2

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

$('.next-button-slick').click(function(){
    $('#portfolio-carousel').slick("slickNext");
});

$('.prev-button-slick').click(function(){
    $('#portfolio-carousel').slick("slickPrev");
 });