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

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

帮助表示赞赏！

Answer 1

更新：$（＆＃39; .carsoule＆＃39;）。slickNext（）;不再工作了。

使用$（＆＃39; .carsoule＆＃39;）.slick（＆＃34; slickNext＆＃34;）;代替。

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

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

您可以在容器中添加额外的overflow !important规则，但是，我已经查看了一些可用于触发next / prev幻灯片的方法，结果证明您可以调用当您在旋转木马容器外部点击某个类/ ID时，在您的旋转木马上更改幻灯片。

所以基本上，在您的轮播后（或页面上的任何位置，如果它可以帮助您），添加两个div/button/a/whatever标记，并添加class或ID to来电使用滑块更改其幻灯片：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个箭头设置为{{ 1}}，并从那里开始工作。

查看 demo here 和css bellow：

position absolute

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

Answer 3

这可以解决您的问题，

CSS

body {
    background: #d7d7d7;
}

.carsoule {
    background: yellow;
    margin: 0 auto;
    overflow: visible;
    width: 250px;
}

.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*/
}

HTML

<div class="carsoule">
    <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>

caroule溢出：隐藏，所以如果你把它放在外面就隐藏了。

Answer 4

问题是悬停。只需将下面的代码块添加到它，您就可以了。

.slick-next:hover,
.slick-prev:hover {
    background-color: red;
    color: white;
}

See working example here

Answer 5

你错过了重要的slick-theme.css http://kenwheeler.github.io/slick/slick/slick-theme.css。我添加了这个文件并插入了你的代码并提出了这个解决方案：

HTML

重新设计包装器的样式，使其包含具有适当边距的.slider类：

class =“carsoule slider”

修改CSS

.slick-prev：before，.slick-next：before {         红色;       }

.slick-prev，.slick-next {         身高：55px;         宽度：55px;       }

.slick-prev {         左：-80px;       / 计划添加按钮图像 /       }

.slick-下一{         右：-80px;       / 计划添加按钮图像 /       }

.slider {         保证金：0 80px 0 80px;         宽度：自动;         }

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

5 个答案: