问题描述
我正在使用Slick幻灯片放映。我对活动幻灯片应用了比例尺2,但是当幻灯片的大小改变时,左右边距不会移动。我该如何解决?
一个示例,其中我发现有效幻灯片上的页边空白:https://codepen.io/jinzagon/pen/KKzaQwz
我的代码:https://codepen.io/jinzagon/pen/YzqpdLj
HTML
<section class="top_slider">
<div>
<a href="google.com"><img src="http://placehold.it/288x288?text=1"></a>
</div>
<div>
<img src="http://placehold.it/288x288?text=2">
</div>
<div>
<img src="http://placehold.it/288x288?text=3">
</div>
<div>
<img src="http://placehold.it/288x288?text=4">
</div>
<div>
<img src="http://placehold.it/288x288?text=1">
</div>
</section>
CSS
.slider {
background-color: white;
margin: 100px auto;
height: auto!important;
}
.slick-slide {
margin: 0px 20px;
}
.slick-slide img {
width: 80%;
transition: all linear 0.4s;
}
.slick-center img {
transform: scale(2);
transition: all linear 0.4s;
}
JS
$(".top_slider").slick({
dots: true,infinite: false,centerMode: true,slidesToShow: 3,slidesToScroll: 1,});
$('html').animate({
scrollTop: $('.top_slider').offset().top
},500);
解决方法
我模仿了它,将所有幻灯片缩放为50%,将活动幻灯片缩放为100%。另外,将内部div添加到类.slide
中,以便我们可以对其进行转换。这样,我们就不会干扰平滑的计算。
您可以根据需要使用比例值进行缩放。
$(".top_slider").slick({
dots: true,infinite: false,centerMode: true,slidesToShow: 3,slidesToScroll: 1,});
$('html').animate({
scrollTop: $('.top_slider').offset().top
},500);
.slider {
background-color: white;
margin: 100px auto;
height: auto!important;
}
.slide {
transform: scale(.5);
transition: transform linear 0.15s;
}
.slick-center .slide {
transform: scale(1);
}
.slick-list {
overflow: visible;
}
/* This should be included in your reset/normalize file */
img {
max-width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
<section class="top_slider">
<div>
<div class="slide">
<img src="http://placehold.it/288x288?text=1">
</div>
</div>
<div>
<div class="slide">
<img src="http://placehold.it/288x288?text=2">
</div>
</div>
<div>
<div class="slide">
<img src="http://placehold.it/288x288?text=3">
</div>
</div>
<div>
<div class="slide">
<img src="http://placehold.it/288x288?text=4">
</div>
</div>
<div>
<div class="slide">
<img src="http://placehold.it/288x288?text=5">
</div>
</div>
</section>