我正在尝试将光滑的 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 编写的。
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不支持这种代码。
这是正常 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 - Slick CSS 轮播/ slider 垂直而不是水平，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51160250/