光滑的滑块中心模式不起作用
Slick Slider Center Mode doesnt work
我使用 Slick Slider 的中心模式。现在我有一个问题,我想要全宽的滑块并且居中的图像比幻灯片大得多。我从模板中添加了一张图片:
我的网站托管于:http://be-virtual.org/schnittchen/
我的代码如下
Javascript:
$(document).on('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
}
}
]
});
});
.slick-center .slide-h3{
color: #FFF;
}
.slider{
width: 600px;
height:150px;
margin: 20px auto;
text-align: center;
}
.slider button {
background: #000;
}
.slider button:hover button:active button:visited {
background: #000;
}
.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;
}
<section class="center slider">
<div>
<img src="http://placehold.it/350x300?text=1">
</div>
<div>
<img src="http://placehold.it/350x300?text=2">
</div>
<div>
<img src="http://placehold.it/350x300?text=3">
</div>
<div>
<img src="http://placehold.it/350x300?text=4">
</div>
<div>
<img src="http://placehold.it/350x300?text=5">
</div>
<div>
<img src="http://placehold.it/350x300?text=6">
</div>
<div>
<img src="http://placehold.it/350x300?text=7">
</div>
<div>
<img src="http://placehold.it/350x300?text=8">
</div>
<div>
<img src="http://placehold.it/350x300?text=9">
</div>
抱歉,我是编码新手,也是这个社区的新手。请来点
耐心和放纵。
使用最新版本升级你的 slick min js 文件
http://cdn.jsdelivr.net/jquery.slick/1.5.5/slick.min.js
首先,您的 jquery 设置有误。它应该以 $(document).ready(function(){
而不是 $(document).on('ready', function() {
开头。在您的 CSS 中,您似乎为幻灯片设置了 width
而不是图像本身,对吗?在这种情况下,请尝试将图像设置为与幻灯片相同的固定 width
。
我使用 Slick Slider 的中心模式。现在我有一个问题,我想要全宽的滑块并且居中的图像比幻灯片大得多。我从模板中添加了一张图片:
我的网站托管于:http://be-virtual.org/schnittchen/
我的代码如下 Javascript:
$(document).on('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
}
}
]
});
});
.slick-center .slide-h3{
color: #FFF;
}
.slider{
width: 600px;
height:150px;
margin: 20px auto;
text-align: center;
}
.slider button {
background: #000;
}
.slider button:hover button:active button:visited {
background: #000;
}
.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;
}
<section class="center slider">
<div>
<img src="http://placehold.it/350x300?text=1">
</div>
<div>
<img src="http://placehold.it/350x300?text=2">
</div>
<div>
<img src="http://placehold.it/350x300?text=3">
</div>
<div>
<img src="http://placehold.it/350x300?text=4">
</div>
<div>
<img src="http://placehold.it/350x300?text=5">
</div>
<div>
<img src="http://placehold.it/350x300?text=6">
</div>
<div>
<img src="http://placehold.it/350x300?text=7">
</div>
<div>
<img src="http://placehold.it/350x300?text=8">
</div>
<div>
<img src="http://placehold.it/350x300?text=9">
</div>
抱歉,我是编码新手,也是这个社区的新手。请来点 耐心和放纵。
使用最新版本升级你的 slick min js 文件 http://cdn.jsdelivr.net/jquery.slick/1.5.5/slick.min.js
首先,您的 jquery 设置有误。它应该以 $(document).ready(function(){
而不是 $(document).on('ready', function() {
开头。在您的 CSS 中,您似乎为幻灯片设置了 width
而不是图像本身,对吗?在这种情况下,请尝试将图像设置为与幻灯片相同的固定 width
。