Question

我的代码：

<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只包含不应以任何方式影响滑块的基本内容。

Answer 1

好的，所以在玩完之后我想我已经找到了这个问题。光滑不会改变幻灯片的高度以适应内容，因此幻灯片填充页面 - .-

不知道如何在JS中解决这个问题。

光滑的旋转木马没有正常工作w /默认样式

1 个答案: