jQuery 光滑的滑块下一个箭头未显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28998536/
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 Slider Next Arrows not showing
提问by Schwan Park
I'm trying to get the next and previous arrows to show up next to the product slider, just like in the Slick Slider example. But my sample doesn't seem to load the appropriate fonts to make that happen.
我试图让下一个和上一个箭头显示在产品滑块旁边，就像在 Slick Slider 示例中一样。但是我的示例似乎没有加载适当的字体来实现这一点。
Here is my code:
这是我的代码：
HTML
HTML
<div class="slider">
<div>
<img src="http://www.onguardapparel.com/images/products/thumb/8013LN_Cat.jpg" height="100" width="100">
</div>
<div>
<img src="http://www.onguardapparel.com/images/products/thumb/HiddenTailor.9074B.jpg" height="100" width="100">
</div>
<div>
<img src="http://www.onguardapparel.com/images/products/thumb/1600ETY.JPG" height="100" width="100">
</div>
<div>
<img src="http://www.onguardapparel.com/images/products/thumb/VIPERPRO81.jpg" height="100" width="100">
</div>
<div>
<img src="http://www.onguardapparel.com/images/products/thumb/garment_bag.jpg" height="100" width="100">
</div>
<div>
<img src="http://www.onguardapparel.com/images/products/thumb/1077.jpg" height="100" width="100">
</div>
</div>
CSS
CSS
body{
background-color: #fff;
}
.slider{
margin: 60px auto;
width: 500px;
}
div{
height: 100%;
}
p{
text-align: center;
font-size: 12px;
color: white;
}
JavaScript
JavaScript
$(document).ready(function(){
$('.slider').slick({
centerMode: true,
centerPadding: '60px',
dots: false,
infinite: true,
speed: 300,
slidesToShow: 4,
slidesToScroll: 1,
arrows: true
});
});
回答by Sai
In your fiddle, you had forgotten to add the slick-theme.css file as an external resource. If you wanted to follow the default styling of the author, you need that file. Or if you want your own styling then please go ahead and make your own styling and make it youw own theme .css file or something.
在您的小提琴中，您忘记添加 slick-theme.css 文件作为外部资源。如果您想遵循作者的默认样式，则需要该文件。或者，如果您想要自己的样式，那么请继续制作您自己的样式并使其成为您自己的主题 .css 文件或其他内容。
<link rel="stylesheet" type="text/css" href="http://kenwheeler.github.io/slick/slick/slick-theme.css"/>
and this css for visibility,
和这个可见性的css，
.slick-prev:before, .slick-next:before{
color:red;
}
The updted jsFiddle can be found here.
Code snippet here...
代码片段在这里...
$(document).ready(function() {
$('.slider').slick({
centerMode: true,
centerPadding: '60px',
dots: true,
/* Just changed this to get the bottom dots navigation */
infinite: true,
speed: 300,
slidesToShow: 4,
slidesToScroll: 1,
arrows: true
});
});body {
background-color: #fff;
}
.slider {
margin: 60px auto;
width: 500px;
}
div {
height: 100%;
}
p {
text-align: center;
font-size: 12px;
color: white;
}
/* added the following to give the background color of the arrows as red for visibility, the default which can be found in the slick-theme.css was white */
.slick-prev:before,
.slick-next:before {
color: red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script><script src="http://kenwheeler.github.io/slick/slick/slick.js"></script>
<link href="http://kenwheeler.github.io/slick/slick/slick.css" rel="stylesheet"/>
<link href="http://kenwheeler.github.io/slick/slick/slick-theme.css" rel="stylesheet"/>
<div class="slider">
<div>
<img src="http://www.onguardapparel.com/images/products/thumb/8013LN_Cat.jpg" height="100" width="100" />
</div>
<div>
<img src="http://www.onguardapparel.com/images/products/thumb/HiddenTailor.9074B.jpg" height="100" width="100" />
</div>
<div>
<img src="http://www.onguardapparel.com/images/products/thumb/1600ETY.JPG" height="100" width="100" />
</div>
<div>
<img src="http://www.onguardapparel.com/images/products/thumb/VIPERPRO81.jpg" height="100" width="100" />
</div>
<div>
<img src="http://www.onguardapparel.com/images/products/thumb/garment_bag.jpg" height="100" width="100" />
</div>
<div>
<img src="http://www.onguardapparel.com/images/products/thumb/1077.jpg" height="100" width="100" />
</div>
</div>Hope this helps
希望这可以帮助
回答by Keypad
If you have included slick-theme.css and are still having problems it is because the theme expects to be in a subfolder (e.g. /theme/slick-theme.css) but the default download puts the slick-theme.css in the same folder as ajax-loader.gif and the fonts folder which are both referenced from the theme.
如果你已经包含了 slick-theme.css 并且仍然有问题，那是因为主题期望在一个子文件夹中（例如 /theme/slick-theme.css）但是默认下载将 slick-theme.css 放在同一个文件夹中文件夹作为 ajax-loader.gif 和字体文件夹，它们都从主题中引用。
Solution: Put the slick-theme.css file in a subfolder or edit the css so that it no longer tries to look in a parent folder. You may also need to change the colour of the arrows as suggested by Sai
解决方案：将 slick-theme.css 文件放在子文件夹中或编辑 css，使其不再尝试在父文件夹中查找。您可能还需要按照Sai 的建议更改箭头的颜色
回答by Mittcho
if the arrow are on a white background just add a color for them in your css like this:
如果箭头在白色背景上，只需在您的 css 中为它们添加颜色，如下所示：
.slick-prev:before, .slick-next:before {
color: #09529b !important;
}
