个人中心
gpt4 book ai didi

javascript - 光滑的 CSS 旋转木马/ slider 垂直而不是水平

转载 作者：太空宇宙 更新时间：2023-11-04 15:50:11 27 4
gpt4 key购买 nike

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

最佳答案

如果我理解你的问题，问题只是在你展示的例子中 CSS 是用 LESS 编写的。

css less

LESSLess (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不支持这种代码。

这是使用普通 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

关于javascript - 光滑的 CSS 旋转木马/ slider 垂直而不是水平，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51160250/

27 4 0
文章推荐： c++ - C++中的指针赋值。 (指向指针的指针位于 LHS 上)
文章推荐： javascript - 切换大小写与字符串匹配
文章推荐： html - 隐藏网页中的文本，选中时显示
文章推荐： c++ - 作为类成员变量引用而不初始化
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com