灵活的CSS旋转木马/滑块垂直而不是水平
灵活的CSS旋转木马/滑块垂直而不是水平
提问于 2018-07-04 01:40:11
我试图让滑块作为一个自动滚动旋转木马在我正在建设的网页工作。我正在尝试实现的是，一条一直缓慢滚动的水平图像行。
然而，当我运行我的代码时，图像加载到垂直堆栈中，根本没有滚动。我已经将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>回答 1
Stack Overflow用户
发布于 2018-07-04 02:06:16
问题出在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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51160250
复制相关文章
相似问题