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

【问题标题】：Slick CSS carousel/slider vertical instead of horizontal光滑的CSS轮播/滑块垂直而不是水平
【发布时间】：2020-10-24 04:48:20
【问题描述】：

我正在尝试将光滑的滑块作为自动滚动轮播在我正在构建的网页中工作。我想要实现的是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>

【问题讨论】：

标签： javascript html css slick.js

【解决方案1】：

如果我正确理解您的问题，问题只是在您显示的示例中，CSS 是用LESS 编写的。

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

【讨论】：

确保我发布的<link /> 和<script /> 在windows.onload 函数之前加载。您可以像上面在 <script type="text/javascript">  </script> 中所做的那样嵌入函数调用本身
再次，检查您的Web Devoloper Inspector <iframe> 它是如何在 SO 中实际实现的。同样在Console 中，您可以仔细检查它是否会引发错误消息。
因此您的系统无法解析//，只需将其替换为https://。
不确定是否没有加载 jquery 或 slick 脚本。我刚刚从示例<iframe> 中复制了html：pastebin.com/GFWX9PJk 试试看！ *您需要再次更换//。
最后一次尝试：pastebin.com/uKXzf86g 将其复制到一个空的html 文件中

【解决方案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>

【讨论】：