Question

当我尝试在我的页面上使用光滑的轮播时，它只会在页面右侧创建一个巨大的空白区域，然后将内容推向右侧。我在codepen中使用了这个确切的代码，然后就可以了。使用相同的脚本，但结果却截然不同。旋转木马似乎在那里，但它将旋转木马div中的所有内容移动到一起，当点击点时它会移动屏幕。似乎无法真正找到任何关于这个问题，任何帮助将不胜感激。

Html：

<head>  
 <link type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" />
 <link type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" rel="stylesheet" />
 <link type="text/css" href="styles/index.processed.css" rel="stylesheet"/>
</head>
<body>
 <div id="wrapper">
  <div id="meet-cost-section">
    <h1 id="cost-title" class="title">Expansive Libary, at low a fee</h1>
    <div id="cost-carousel">
      <div class="cost-slide">
        <img class="cost-slide-img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1353550/004-coins.svg" />

      </div>
      <div class="cost-slide">
        <img class="cost-slide-img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1353550/003-open-book.svg" />

      </div>
      <div class="cost-slide">
        <img class="cost-slide-img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1353550/001-dislike.svg" />

      </div>
    </div>
  </div>
 </div>
 <script src="https://code.jquery.com/jquery-3.3.1.min.js"integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="crossorigin="anonymous"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.0.1/jquery-migrate.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
 <script src="scripts/index.js"></script>
</body>

CSS：

#meet-cost-section {
  padding: 4rem 0 5rem;
}

#cost-title {
  color: #185d48;
  font-weight: 300;
  margin: 0 auto 40px;
  width: 90%;
}

#cost-carousel {
  width: 80%;
  margin: auto;
}

.cost-slide {
  cursor: -webkit-grab;
  outline: none;
}

.cost-slide-img {
  margin: auto;
  width: 4rem;
}

.cost-slide-title {
  color: #185d48;
  font-size: 1rem;
  font-weight: 300;
  letter-spacing: .1rem;
}

.cost-slide-text {
  font-weight: 300;
  font-size: .75rem;
  letter-spacing: .1rem;
  line-height: 1.3rem;
}

JS：

$(document).ready(function() {

     $('#cost-carousel').slick({
        slidesToShow: 1,
        dots: true,
       arrows: false,
     });
});

指向我的Jsfiddle

的链接

光滑的旋转木马创造了大量的白色空间，而不是创建旋转木马

0 个答案: