代码之家 › 专栏 › 技术社区 › anti

光滑的CSS旋转文字/滑块垂直而不是水平

slick-slider css html javascript

anti · 技术社区 · 6 年前

我正试图让滑溜滑块作为一个自动滚动转盘在我正在建立的网页上工作。我想达到的是 this effect ,一条水平的图像线,一直缓慢滚动。

然而,当我运行我的代码时,这些图像加载到一个垂直的堆栈中,根本没有滚动。我已将Slick文件夹复制到与我相同的文件夹中 index.html . 我错过了什么?

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));
}

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

2 回复 | 直到 6 年前

wittich Manish Shrivastava 6 年前

.滑块{ 宽度:100%; 利润率:2倍自动; 文本对齐:居中; 填料:10px; 颜色:白色; } .滑块.父幻灯片{ 填料:15px; } .滑块img{ 显示:块; 边距:自动; } .滑块:之前, .滑块:之后{ 内容:“”; 位置:绝对; Z-指数:1; 宽度:100px;

CSS


   LESS

css less

https://en.wikipedia.org/wiki/Less_(stylesheet_language)

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

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

https://pastebin.com/uKXzf86g

wittich Manish Shrivastava 6 年前

$(document).ready(function(){

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