Javascript 带默认样式的滑动转盘工作不正常_Javascript_Jquery_Html_Css

Javascript 带默认样式的滑动转盘工作不正常

javascript jquery html css

Javascript 带默认样式的滑动转盘工作不正常,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我的代码： <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 r

我的代码：

<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>


信息
信息2
信息3
信息4
Img
Img2
Img3
Img4
$（文档）.ready（函数（）{
$（'.slider info'）.slick({
幻灯片放映：1，
幻灯片滚动：1，
箭头：错，
是的，
asNavFor:“.滑块img”
});
$（'.slider img'）。光滑({
幻灯片放映：3，
幻灯片滚动：1，
asNavFor:“.slider info”，
点：是的，
centerMode：对，
焦点选择：正确
});
});

这与此处的滑块同步示例类似：（示例底部附近）

我的代码可以在这里看到：但是每张幻灯片都是全宽的，这使得它毫无用处

Style.css只包含一些基本的东西，这些东西不会以任何方式影响滑块。

好的，所以在玩过之后，我想我已经找到了问题所在。Slick不会改变幻灯片的高度以适应内容，因此幻灯片会填满页面--

但不知道如何在JS中修复此问题