Javascript 卡在光滑的旋转木马“中心模式”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28950755/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Stuck with Slick Carousel "Center mode"
提问by Ian Batten
I've been toying around with Slick carousel for a fair few hours, and really can't get my head around how to implement the "center mode" that's on the Slick website: http://kenwheeler.github.io/slick/
我一直在玩 Slick carousel 几个小时，真的无法理解如何实现 Slick 网站上的“中心模式”：http: //kenwheeler.github.io/slick/
It looks something like this:
它看起来像这样：
I've got the current code in place, but it's still not giving me what I want:
我已经有了当前的代码，但它仍然没有给我我想要的：
< link rel = "stylesheet"
type = "text/css"
href = "http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css" >
< script type = "text/javascript"
src = "http://code.jquery.com/jquery-1.11.0.min.js" > < /script>
<link rel="stylesheet" type="text/css
" href="
http: //kenwheeler.github.io/slick/css/style.css">
< script type = "text/javascript"
src = "http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js" > < /script>
<script type="text/javascript
">
$(document).ready(function() {
$('.center').slick({
centerMode: true,
centerPadding: '60px',
slidesToShow: 3,
responsive: [
{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}
]
});
$('.single-item').slick({
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1
});
});
</script>
<section id="
features " class="
blue ">
<div class="
center ">
<div class="
content ">
<div class="
single - item ">
<div><h3>1</h3></div>
<div><h3>2</h3></div>
<div><h3>3</h3></div>
<div><h3>4</h3></div>
<div><h3>5</h3></div>
<div><h3>6</h3></div>
</div>
</div>
</div>
</section>If anyone has any suggestions as to why this might not be working, I'd really appreciate the help.
如果有人对为什么这可能不起作用有任何建议，我将非常感谢您的帮助。
Thanks.
谢谢。
回答by nagoor15
I think this might be appropriate answer for slick centre mode
我认为这可能是圆滑中心模式的合适答案
<html>
<head>
<meta charset="utf-8">
<title>Maganti IT Solution</title>
<link rel="stylesheet" type="text/css" href="slick.css"/>
<link rel="stylesheet" type="text/css" href="slick-theme.css"/>
</head>
<style>
.slick-center .slide-h3{
color: #FFF;
}
.slider{
width: 600px;
height:150px;
margin: 20px auto;
text-align: center;
}
.slide-h3{
margin: 10% 0 10% 0;
padding: 40% 20%;
background: #008ed6;
}
.slider div{
margin-right: 5px;
}
.slick-slide{
opacity: .6;
}
.slick-center{
display: block;
max-width: 10% !important;
max-height:20% !important;
opacity: 1;
}
</style>
<body>
<section id="slick-content">
<div class="slider">
<div><div class="slide-h3">1</div></div>
<div><div class="slide-h3">2</div></div>
<div><div class="slide-h3">3</div></div>
<div><div class="slide-h3">4</div></div>
<div><div class="slide-h3">5</div></div>
<div><div class="slide-h3">6</div></div>
</div>
</body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.slider').slick({
centerMode: true,
centerPadding: '60px',
slidesToShow: 3,
speed:1500,
index: 2,
responsive: [
{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}
]
});
});
</script>
</body>
</html>
回答by Asaf David
- You have 2 sliders defined (center, single-item) while in your html only "single-item" has slides. The "center" slide is wrapping the "single-item" and holds only one child div.
- The class single-item was written with spaces making it 3 different classes "single" "-" (although I don't think this one is a class) and "item".
- 您定义了 2 个滑块（中心，单项），而在您的 html 中只有“单项”有幻灯片。“中心”幻灯片包裹着“单个项目”并且只包含一个子 div。
- 类单项用空格编写，使其成为 3 个不同的类“单个”“-”（尽管我不认为这是一个类）和“项”。
If you intended to make the "single-item" slide to show in centerMode then this is the right code:
如果您打算使“单项”幻灯片以 centerMode 显示，那么这是正确的代码：
<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css" />
< script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js" > </script>
<link rel="stylesheet" type="text/css" href="http://kenwheeler.github.io/slick/css/style.css" />
<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"> </script>
<script type="text/javascript">
$(document).ready(function() {
$('.single-item').slick({
centerMode: true,
centerPadding: '60px',
slidesToShow: 3,
responsive: [
{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}
]
});
});
</script>
<section id="features" class="blue">
<div class="content">
<div class="single-item">
<div><h3>1</h3></div>
<div><h3>2</h3></div>
<div><h3>3</h3></div>
<div><h3>4</h3></div>
<div><h3>5</h3></div>
<div><h3>6</h3></div>
</div>
</div>
</section>
回答by Austin Mullins
After cleaning up your snippet to work correctly (moved HTML to the HTML part, removed extraneous and erroneous white space), I can't tell what isn't working with your code. Maybe it was just syntax errors?
在清理您的代码段以使其正常工作（将 HTML 移至 HTML 部分，删除无关和错误的空格）后，我无法判断哪些代码不适用于您的代码。也许这只是语法错误？
The main thing I noticed was that you had class="single - item"on an element that was clearly meant to have the class single-item, as that was the selector used to create your slider. I don't know if that was in your original code or if it was just copied incorrectly.
我注意到的主要事情是你有class="single - item"一个明显意味着有 class 的元素single-item，因为它是用于创建滑块的选择器。我不知道这是在您的原始代码中，还是只是被错误地复制了。
$(document).ready(function() {
$('.center').slick({
centerMode: true,
centerPadding: '60px',
slidesToShow: 3,
responsive: [
{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}
]
});
$('.single-item').slick({
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css" rel="stylesheet"/>
<link href="http://kenwheeler.github.io/slick/css/style.css" rel="stylesheet"/>
<script src="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>
<section id="features" class="blue">
<div class="center">
<div class="content">
<div class="single-item">
<div><h3>1</h3></div>
<div><h3>2</h3></div>
<div><h3>3</h3></div>
<div><h3>4</h3></div>
<div><h3>5</h3></div>
<div><h3>6</h3></div>
</div>
</div>
</div>
</section>