Question

我正在尝试使用光滑的滑块作为在我正在构建的网页中运行的自动滚动轮播。我想要实现的是this effect，这是一条水平线，始终滚动缓慢。

但是，当我运行代码时，图像以垂直堆栈加载，根本没有滚动。我已将光滑文件夹复制到与index.html相同的文件夹中。我在这里想念什么？

我的CSS中有这个

html,
body {
  height: 100%
}

.slider {
  width: 300px;
  margin: 2px auto;
  text-align: center;
  padding: 10px;
  color: white;
  .parent-slide {
    padding: 15px;
  }
  img {
    display: block;
    margin: auto;
  }
}

.slider:before,
.slider:after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 100px;
  top: 0;
  height: 100%;
  pointer-events: none;
  /*makes the linkes behind clickable.*/
}

.slider:before {
  left: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}

.slider:after {
  right: 0;
  background: linear-gradient(to left, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}

在我的HTML中：

<body>
  <div class="slider">
    <div class="slide">
      <img src="images/stills/apt.jpg" alt="" class="img-responsive" /> </div>
    <div class="slide">
      <img src="images/stills/apt.jpg" alt="" class="img-responsive" /> </div>
    <div class="slide">
      <img src="images/stills/apt.jpg" alt="" class="img-responsive" /> </div>
    <div class="slide">
      <img src="images/stills/apt.jpg" alt="" class="img-responsive" /> </div>
    <div class="slide">
      <img src="images/stills/apt.jpg" alt="" class="img-responsive" /> </div>
    <div class="slide">
      <img src="images/stills/apt.jpg" alt="" class="img-responsive" /> </div>
    <div class="slide">
      <img src="images/stills/apt.jpg" alt="" class="img-responsive" /> </div>
  </div>
  <script type="text/javascript">
    $(document).ready(function() {
      $('.slider').slick({
        autoplay: true,
        autoplaySpeed: 0,
        speed: 2200,
        arrows: true,
        centerMode: true,
        slidesToShow: 3,
        slidesToScroll: 1,
        cssEase: 'linear'
      });
    });
  </script>
</body>

Answer 1

如果我理解您的问题是对的，那么问题仅在于您在示例中显示了CSS是用LESS编写的。

css less

少更少（有时风格化为LESS）是一种动态的预处理器样式表语言，可以将其编译为级联样式表（CSS）并在客户端或服务器端运行。 — https://en.wikipedia.org/wiki/Less_(stylesheet_language)

您的代码中的问题是级联编写的代码：

.slider{
  /* .. */
  .parent-slide{padding:15px;}
  img{display: block;margin:auto;}
}

CSS 不支持这种代码。

以下是 normal CSS的示例：

window.onload=function(){ $('.slider').slick({ autoplay:true, autoplaySpeed: 0, speed: 2200, arrows:false, centerMode:true, slidesToShow:5, slidesToScroll:3, cssEase: 'linear' }); };

body { background: #000; } .slider { width: 100%; margin: 2px auto; text-align: center; padding: 10px; color: white; } .slider .parent-slide { padding: 15px; } .slider img { display: block; margin: auto; } .slider:before, .slider:after { content: ""; position: absolute; z-index: 1; width: 100px; top: 0; height: 100%; pointer-events: none; /*makes the linkes behind clickable.*/ } .slider:before { left: 0; background: linear-gradient(to right, #000000, rgba(0, 0, 0, 0)); } .slider:after { right: 0; background: linear-gradient(to left, #000000, rgba(0, 0, 0, 0)); }

<link rel="stylesheet prefetch" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <link rel="stylesheet prefetch" href="https://cdn.jsdelivr.net/jquery.slick/1.5.0/slick.css"> <link rel="stylesheet prefetch" href="https://cdn.jsdelivr.net/jquery.slick/1.5.0/slick-theme.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/jquery.slick/1.5.0/slick.min.js"></script> <div class="slider"> <div class="slide"> <img src="http://fillmurray.com/300/300" alt="" class="img-responsive" /> </div> <div class="slide"> <img src="http://fillmurray.com/300/300" alt="" class="img-responsive" /> </div> <div class="slide"> <img src="http://fillmurray.com/300/300" alt="" class="img-responsive" /> </div> <div class="slide"> <img src="http://fillmurray.com/300/300" alt="" class="img-responsive" /> </div> <div class="slide"> <img src="http://fillmurray.com/300/300" alt="" class="img-responsive" /> </div> <div class="slide"> <img src="http://fillmurray.com/300/300" alt="" class="img-responsive" /> </div> <div class="slide"> <img src="http://fillmurray.com/300/300" alt="" class="img-responsive" /> </div> <div class="slide"> <img src="http://fillmurray.com/300/300" alt="" class="img-responsive" /> </div> <div class="slide"> <img src="http://fillmurray.com/300/300" alt="" class="img-responsive" /> </div> <div class="slide"> <img src="http://fillmurray.com/300/300" alt="" class="img-responsive" /> </div> <div class="slide"> <img src="http://fillmurray.com/300/300" alt="" class="img-responsive" /> </div> </div>

用您的Web Developer Inspector查找真实的源代码总是有帮助的。

要查看如何将代码实施到HTML文件中，请参见以下代码并将其粘贴到空HTML文件中：https://pastebin.com/uKXzf86g

Answer 2

问题出在html页面中使用的$(document).ready(function(){。不知何故，它不考虑利用平滑属性集。

如果您尝试在HTML文件中尝试以下操作，则肯定可以！

<script type="text/javascript">
window.onload=function(){
   $('.slider').slick({
       autoplay:true,
       autoplaySpeed: 0,
       speed: 2200,
       arrows:true,
       centerMode:true, 
       slidesToShow:3,
       slidesToScroll:1,
       cssEase: 'linear'
   });
};
</script>

光滑的CSS轮播/滑块垂直而不是水平

2 个答案: