我想实现图中所示的相同设计。我可以进行设计,但是每当我使用光滑的滑块在左右之间留出缝隙时,对齐就会发疯。有人可以帮忙吗?
这里是代码
var $st = $('.pagination');
var $slickEl = $('.center');
$slickEl.on('init reInit afterChange', function (event, slick, currentSlide, nextSlide) {
var i = (currentSlide ? currentSlide : 0) + 1;
$st.text(i + ' of ' + slick.slideCount);
});
$slickEl.slick({
centerMode: true,
centerPadding: '0px',
slidesToShow: 3,
focusOnSelect: true,
dots: false,
infinite: true,
speed: 300,
responsive: [
{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}
]
});
.slide-container{
position: relative;
margin: 0 auto;
padding: 100px 0;
}
.slick-active {
padding: 20px 0;
}
.slick-center {
transform: scale(1);
opacity: 1 !important;
}
.slick-slide:not(.slick-active) {
margin: 20px 0;
}
.child {
width:100%;
}
.slide:not(.slick-active) {
cursor: pointer;
}
.pagination {
text-align: center;
color: #000;
font-size: 1.2rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.slick/1.5.0/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.slick/1.5.0/slick-theme.css"/>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.slick/1.5.0/slick.min.js"></script>
<div class="slide-container">
<div class="slider center">
<div class="slide">
<img src="images/hero-article-1.jpg" alt="1">
</div>
<div class="slide">
<img src="images/hero-article-1.jpg" alt="2">
</div>
<div class="slide">
<img src="images/hero-article-1.jpg" alt="3">
</div>
<div class="slide">
<img src="images/hero-article-1.jpg" alt="4">
</div>
<div class="slide">
<img src="images/hero-article-1.jpg" alt="5">
</div>
<div class="slide">
<img src="images/hero-article-1.jpg" alt="6">
</div>
</div>
<div class="pagination"></div>
</div>
每次向当前幻灯片添加填充或边距时,它都会中断。似乎我缺少什么。
使用边距代替填充来填充空白。
.slick-active {
margin: 20px 0;
}
我建议您仅在显示导航时才对幻灯片进行样式化:
.slick-dotted .slick-current img {
transform: scale(1.1);
}
您将得到这样的结果:
$(document).on('ready', function() {
$(".center").slick({
dots: true,
infinite: true,
centerMode: true,
slidesToShow: 1,
slidesToScroll: 3
});
});
html,
body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
.slider {
width: 50%;
margin: 100px auto;
}
.slick-slide {
margin: 10px 20px;
}
.slick-slide img {
width: 100%;
transform: scale(0.9);
}
.slick-prev:before,
.slick-next:before {
color: black;
}
.slick-dotted .slick-current img {
transform: scale(1.1);
}
<link href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<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>
</section>
<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>
</section>