Bus*_*Bee 41 javascript carousel
我正在使用http://kenwheeler.github.io/slick/,但似乎无法让它按照应有的方式运行.运行下面的代码后,我可以看到CSS和js文件已加载但未反映.例如,没有箭头.
有什么我可能做错了(注意:光滑的CSS和js文件,以及html文件都位于同一文件夹中
<html>
<head>
<link rel="stylesheet" type="text/css" href="../Slick/slick.css" />
</head>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="../Slick/slick.min.js"></script>
<h2>title</h2>
<script type="text/javascript">
$(document).ready(function(){
$('.single-item').slick();
});
});
</script>
<div>
<div class="single-item">
<div > <img src="../Slick/F1.jpg" alt="bkj"></div>
<div > <img src="../Slick/F1.jpg" alt="bkj"></div>
<div > <img src="../Slick/F1.jpg" alt="bkj"></div>
</div>
</div>
</body>
</html>
Int*_*oft 68
这是因为默认情况下箭头是白色的,所以在白页上你看不到它.
确保箭头已启用:
$('.single-item').slick({
arrows: true
});
添加css代码以查看:
<style>
.slick-prev:before, .slick-next:before {
color:red !important;
}
</style>
AWo*_*olf 15
对我来说,它<div class="content"> ... </div>是在一个较小的包装内添加光滑的轮播后工作的,这个包装器在包装器外面有prev/next按钮的空间.
下面的CSS对我有用:
.content {
margin: auto;
padding: 20px;
width: 80%;
}
我也习惯于normalize.css正确地将prev/next按钮对中.没有正常化的定心并不完美.
$('.slickslide').slick({
dots: true,
infinite: true,
speed: 500,
autoplay: true,
slidesToShow: 1,
slidesToScroll: 1});.slickslide {
height: 200px;
background: lightgray;
}
body {
background-color: lightblue;
}
.content {
margin: auto;
padding: 20px;
width: 80%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.0/slick-theme.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.0/slick.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.0/slick.css" rel="stylesheet"/>
<div class="content">
<div class="slickslide" slick="">
<div>Syling of left and right arrow is OK now. Required normalize.css and a content wrap around the slickslide with a smaller width.</div>
<div>your content2</div>
<div>your content3</div>
</div>
</div>Eug*_*ang 12
我有同样的问题,我发现它只是出于.single-item分歧,这是我的解决方案
<style>
.slick-prev {
margin-left: 40px;
}
.slick-next {
margin-right: 40px;
}
</style>
它对我有用
小智 3
我刚刚尝试了你的代码，看起来一切正常，问题应该与页面布局有关。
您可以尝试使用这些选项来检查轮播是否正常播放
$(document).ready(function(){
$('.single-item').slick({
autoplay:true,
autoplaySpeed: 1000
});
});
然后你应该添加一些 css 规则来查看箭头，例如：
<style>
body{
background: green;
}
.single-item{
margin-left: 10%;
margin-right: 10%;
}
</style>