我试图让下一个和上一个箭头显示在产品滑块旁边,就像Slick Slider的例子一样.但是我的示例似乎没有加载适当的字体来实现这一点.
这是我的代码：
<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
body{
background-color: #fff;
}
.slider{
margin: 60px auto;
width: 500px;
}
div{
height: 100%;
}
p{
text-align: center;
font-size: 12px;
color: white;
}
JavaScript的
$(document).ready(function(){
$('.slider').slick({
centerMode: true,centerPadding: '60px',dots: false,infinite: true,speed: 300,slidesToShow: 4,slidesToScroll: 1,arrows: true
});
});
解决方法
在您的小提琴中,您忘记将slick-theme.css文件作为外部资源添加.如果您想遵循作者的默认样式,则需要该文件.或者如果你想要自己的样式,那么请继续做自己的造型,并使它自己的主题.css文件或某事.
<link rel="stylesheet" type="text/css" href="http://kenwheeler.github.io/slick/slick/slick-theme.css"/>
而这个CSS可见度,
.slick-prev:before,.slick-next:before{
color:red;
}
The updted jsFiddle can be found here.
代码片段在这里…
$(document).ready(function() {
$('.slider').slick({
centerMode: true,dots: true,/* Just changed this to get the bottom dots navigation */
infinite: true,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>
希望这可以帮助
