光滑的 CSS 轮播/滑块垂直而不是水平
[英]Slick CSS carousel/slider vertical instead of horizontal
问题描述
我正在尝试将光滑的滑块作为在我正在构建的网页中工作的自动滚动轮播。 我想要实现的是这种效果，一条一直缓慢滚动的水平图像线。
然而，当我运行我的代码时，图像加载在垂直堆栈中，根本没有滚动。 我已将 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>
2 个解决方案
解决方案1
2 已采纳 2018-07-03 17:53:37
如果我理解你的问题是正确的，问题只是在你展示的例子中CSS是用LESS编写的。
LESS Less（有时风格化为 LESS）是一种动态预处理器样式表语言，可以编译成级联样式表 (CSS) 并在客户端或服务器端运行。 — 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
解决方案2
1 2018-07-03 18:06:15
问题出在 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 Carousel 在移动设备上显示垂直而不是水平
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.