Slick CSS carousel/slider 垂直而不是水平

Question

我正在尝试将光滑的滑块作为在我正在构建的网页中工作的自动滚动轮播。我想要实现的是 this effect，一直缓慢滚动的水平线图像。

然而，当我运行我的代码时，图像以垂直堆栈加载，根本没有滚动。我已将 slick 文件夹复制到与 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.

LESS Less (sometimes stylized as LESS) is a dynamic preprocessor style sheet language that can be compiled into Cascading Style Sheets (CSS) and run on the client side or server side. — 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 links 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="https://loremflickr.com/300/300" alt="" class="img-responsive" />
  </div>
   <div class="slide">
    <img src="https://placekitten.com/300/300" alt="" class="img-responsive" />
  </div>
  <div class="slide">
    <img src="https://placeimg.com/300/300" alt="" class="img-responsive" />
  </div>
  <div class="slide">
    <img src="https://placebear.com/300/300" alt="" class="img-responsive" />
  </div>
  <div class="slide">
    <img src="https://stevensegallery.com/300/300" alt="" class="img-responsive" />
  </div>
  <div class="slide">
    <img src="https://picsum.photos/300/300" alt="" class="img-responsive" />
  </div>
   <div class="slide">
    <img src="https://loremflickr.com/300/300" alt="" class="img-responsive" />
  </div>
   <div class="slide">
    <img src="https://placecage.com/300/300" alt="" class="img-responsive" />
  </div>
  <div class="slide">
    <img src="https://placeimg.com/300/300" alt="" class="img-responsive" />
  </div>
  <div class="slide">
    <img src="https://placebear.com/300/300" alt="" class="img-responsive" />
  </div>
  <div class="slide">
    <img src="https://stevensegallery.com/300/300" alt="" class="img-responsive" />
  </div>
  <div class="slide">
    <img src="https://picsum.photos/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>

Slick CSS carousel/slider 垂直而不是水平

Slick CSS carousel/slider vertical instead of horizontal

html

javascript

css

slick.js