<html>
<head>
<title>My Now Amazing Webpage</title>
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
</head>
<style>
.d1 {
background-color: lightblue;
display: flex;
}
a {
background-color: yellow;
display: block;
margin: 0 10px;
width: 200px;
height: 200px;
}
</style>
<body>
<div class="d1">
<div><a href="https://kenwheeler.github.io/slick/">1</a></div>
<div><a href="https://kenwheeler.github.io/slick/">2</a></div>
<div><a href="https://kenwheeler.github.io/slick/">3</a></div>
<div><a href="https://kenwheeler.github.io/slick/">4</a></div>
<div><a href="https://kenwheeler.github.io/slick/">5</a></div>
<div><a href="https://kenwheeler.github.io/slick/">6</a></div>
</div>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.multiple-items').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 3
});
});
</script>
</body>
</html>
我试图连续显示6个<a>
,一次要显示3个。我使用上面的代码直接从其教程站点(https://kenwheeler.github.io/slick/)复制和粘贴,并且替换了容器(类d1)以及子元素,但结果不起作用或根本没有移动,甚至连左边也没有和右按钮出现...该文件夹仅包含此.html文件。
答案 0 :(得分:2)
我更改了两点来解决此问题:
您的代码已更新,现在可以使用:
.d1 .slick-prev,
.d1 .slick-next {
width: 50px;
height: 50px;
z-index: 9999;
opacity: 1;
}
.d1 .slick-prev {
left: 25px;
}
.d1 .slick-next {
right: 25px;
}
<html>
<head>
<title>My Now Amazing Webpage</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css"/>
</head>
<style>
.d1 {
background-color: lightblue;
display: flex;
}
a {
background-color: yellow;
display: block;
margin: 0 10px;
width: 200px;
height: 200px;
}
</style>
<body>
<div class="multiple-items d1">
<div><a href="https://kenwheeler.github.io/slick/">1</a></div>
<div><a href="https://kenwheeler.github.io/slick/">2</a></div>
<div><a href="https://kenwheeler.github.io/slick/">3</a></div>
<div><a href="https://kenwheeler.github.io/slick/">4</a></div>
<div><a href="https://kenwheeler.github.io/slick/">5</a></div>
<div><a href="https://kenwheeler.github.io/slick/">6</a></div>
</div>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.multiple-items').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 3,
arrows: true
});
});
</script>
</body>
</html>
答案 1 :(得分:1)
您正在初始化类“ d1”以用于平滑处理。但是在脚本上,您定位的是错误的类。请使用以下内容更新脚本</ p>
$(document).ready(function(){
// Your class "multiple-items" will replace with "d1"
$('.d1').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 3
});
});
答案 2 :(得分:0)
需要用d1替换.multiple-items,d1是jQuery中的类名。 还要确保您的CDN或文件目录路径正确。 任何控制台错误?