0
我的代码:油滑旋转木马无法正常工作瓦特/默认样式
<html>
<head>
<link rel="stylesheet" type='text/css' href='../style.css'>
<link rel="stylesheet" type='text/css' href='//cdn.unreal-designs.co.uk/cont/cdnjslatest/?lib=slick-carousel&file=slick.css'>
<link rel="stylesheet" type='text/css' href='//cdn.unreal-designs.co.uk/cont/cdnjslatest/?lib=slick-carousel&file=slick-theme.css'>
</head>
<body>
<div class="slideCont">
<div class="slider-info">
<div>Info</div>
<div>Info2</div>
<div>Info3</div>
<div>Info4</div>
</div>
<div class="slider-img">
<div>Img</div>
<div>Img2</div>
<div>Img3</div>
<div>Img4</div>
</div>
</div>
<script src="//cdn.unreal-designs.co.uk/cont/cdnjslatest/?lib=jquery&file=jquery.min.js"></script>
<script src="//cdn.unreal-designs.co.uk/cont/cdnjslatest/?lib=jquery-migrate&file=jquery-migrate.min.js"></script>
<script src="//cdn.unreal-designs.co.uk/cont/cdnjslatest/?lib=slick-carousel&file=slick.min.js"></script>
<script>
$(document).ready(function(){
$('.slider-info').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.slider-img'
});
$('.slider-img').slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.slider-info',
dots: true,
centerMode: true,
focusOnSelect: true
});
});
</script>
</body>
</html>
这意味着是像这里的滑块同步处理样品:http://kenwheeler.github.io/slick/(近的例子底部)
我的代码可以看到住在这里:http://new.unreal-designs.co.uk/portfolio/但每张幻灯片都是全宽,使其显得毫无用处。
Style.css只包含基本内容,不应以任何方式影响滑块。