我已经针对这个问题梳理了所有文章,但我无法找到解决方案。
我没有得到任何工作。这是代码:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Slick</title>
<link rel="stylesheet" type="text/css" href="bower_components/slick-carousel/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="bower_components/slick-carousel/slick/slick-theme.css" />
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<style>
body {
background: #333;
margin: 0;
}
div {
outline: none;
}
#container {
width: 600px;
height: 250px;
background: transparent url(media/bg-headline.jpg) no-repeat center center;
position: relative;
}
#cta {
position: absolute;
right: 0;
bottom:0;
padding: 10px;
}
</style>
</head>
<body>
<div id="container">
<div class="center">
<div><h1>1</h1><div>
<div><h1>2</h1><div>
<div><h1>3</h1><div>
</div>
<div id="cta"><a href="#"><img src="media/12254-cta.png" alt="Learn More >" width="100"></a></div>
</div>
<script type="text/javascript" src="bower_components/slick-carousel/slick/slick.min.js"></script>
<!--<script src="js/12254.js"></script>-->
<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
</body>
</html>
JS
// Slick Version: Center Mode
$('.center').slick({
centerMode: true,
centerPadding: '60px',
slidesToShow: 3,
responsive: [
{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}
]
});
数字以垂直线显示。根本没有旋转木马。我已经尝试了几个版本的slick.js
,slick.min.js
甚至不同版本的jQuery的链接,但无济于事。
我在俯瞰什么?