CSS 光滑 - 上一个/下一个箭头停留在滑动旋转木马内
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27803112/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Slick - the prev/next arrow stay stuck inside the sliding carousel
提问by joe
Using slick: http://kenwheeler.github.io/slick/
使用光滑：http: //kenwheeler.github.io/slick/
HTML
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
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*/
}
Tried to override, but the prev and next buttons stay stuck inside the carousel. Wanted to replace the css with button images and the buttons should be outside the carousel, just like the example on slick website. Couldn't figure where I went wrong.
试图覆盖，但上一个和下一个按钮卡在轮播中。想要用按钮图像替换 css，并且按钮应该在轮播之外，就像 slick 网站上的例子一样。想不通我哪里出错了。
Help appreciated!
帮助表示赞赏！
回答by RGLSV
UPDATE : $('.carsoule').slickNext(); won't work anymore.
Use $('.carsoule').slick("slickNext"); instead.
更新：$('.carsoule').slickNext(); 不会再工作了。
使用 $('.carsoule').slick("slickNext"); 反而。
https://github.com/kenwheeler/slick/issues/1613
https://github.com/kenwheeler/slick/issues/1613
Looking at the css that this plugin uses, I noticed the parent has overflow:hiddenapplied to it, so your arrows wont show beyond the parents container.
查看此插件使用的 css，我注意到父级已overflow:hidden应用于它，因此您的箭头不会显示在父级容器之外。
You can mess with adding a extra overflow !importantrule to the container, however, I've looked over at some methods that you can use to trigger next/prev slide, and turns out that you can call on your carousel to change slide, when clicked on a certain class/id outside of the carousel container.
您可以overflow !important在容器中添加额外的规则，但是，我查看了一些可用于触发下一张/上一张幻灯片的方法，结果证明您可以在单击时调用轮播来更改幻灯片轮播容器外的某个类/ID。
So basically, after your carousel(or anywhere on the page if it helps you out), add two div/button/a/whatevertags, and add either a classor id tocall upon the slider to change its slide using: slickNext()or slickPrev()
所以基本上，在你的轮播（或页面上的任何地方，如果它对你有帮助的话）之后，添加两个div/button/a/whatever标签，并在滑块上添加一个class或 idto调用以使用以下方法更改其幻灯片：slickNext()或slickPrev()
You can wrap everything in a master container, your carousel and those two extra tags and style them the way you want.
您可以将所有内容包装在一个主容器、您的轮播和这两个额外的标签中，并按照您想要的方式对其进行设计。
Check out the demo here, and the extra js/markup used bellow:
<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();
});
UPDATE 2
更新 2
If you want to keep your markup, and not add any extra stuff, you can either remove the inline overflow: hidden rule from the container, or via css with overflow: visible !important, and set those 2 arrows to position absolute, and work you way from there.
如果你想保留你的标记，而不是添加任何额外的东西，你可以从容器中删除内联溢出：隐藏规则，或者通过 css with overflow: visible !important，并将这两个箭头设置为position absolute，然后从那里开始工作。
Check out the demo hereand the css bellow:
/*extra stuff*/
.carsoule{
overflow: visible !important;
}
.slick-prev, .slick-next {
position: absolute;
background: red;
}
回答by Dishan TD
<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");
});
回答by Justin Breiland
This should solve your issue,
这应该可以解决您的问题，
CSS
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
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>
The carsoule had overflow:hidden, so if you positioned it outside it was hidden.
caroule 有溢出：隐藏，所以如果你把它放在外面，它就被隐藏了。
回答by Sleek Geek
The problem is the hover. Just add the block of code below to it and you'll be just fine.
问题是悬停。只需将下面的代码块添加到它，你就可以了。
.slick-next:hover,
.slick-prev:hover {
background-color: red;
color: white;
}
回答by Kg Tee
You missed out the important slick-theme.css http://kenwheeler.github.io/slick/slick/slick-theme.css. I added this file and meddled with your codes and came up with this solution:
你错过了重要的 slick-theme.css http://kenwheeler.github.io/slick/slick/slick-theme.css。我添加了这个文件并干预了你的代码并提出了这个解决方案：
HTML
HTML
Re-styling your wrapper to include .slider class with proper margins:
重新设计您的包装器以包含具有适当边距的 .slider 类：
class="carsoule slider"
class="carsoule 滑块"
Modified CSS
修改后的 CSS
.slick-prev:before, .slick-next:before { color:red; }
.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/ }
.slider { margin:0 80px 0 80px; width: auto; }
.slick-prev:before, .slick-next:before { color:red; }
.slick-prev, .slick-next { height: 55px; 宽度：55px；}
.slick-prev { 左：-80px; /计划添加按钮图片/ }
.slick-next{ 右：-80px; /计划添加按钮图片/ }
.slider { 边距：0 80px 0 80px; 宽度：自动；}
