问题是光滑的滑块div有溢出:隐藏; 所以幻灯片div的盒子阴影不断被切断。
有人也遇到过这个问题吗?
这是一个展示问题的小提琴: https://jsfiddle.net/2zvcud0u/
HTML
<div class="slider row">
<div class="col-sm-4">
<div class="drop-shadow">
<div class="content">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="drop-shadow">
<div class="content">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="drop-shadow">
<div class="content">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="drop-shadow">
<div class="content">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
</div>
</div>
CSS
.row{
margin: 20px 0;
}
.drop-shadow {
box-shadow: 0px 0px 43px 0px rgba(0, 0, 0, 0.35);
}
.content{
margin: 10px;
}
JS
$('.slider').slick({
autoplay: false,
dots: false,
arrows: false,
infinite: false,
speed: 300,
slidesToShow: 3,
slidesToScroll: 1,
swipeToSlide: true,
responsive: [{
breakpoint: 992,
settings: {
slidesToShow: 2
}
}, {
breakpoint: 768,
settings: {
slidesToShow: 1
}
}]
});
感谢您的任何建议
答案 0 :(得分:4)
好的伙计们,我想我找到了一个安静的简单解决方案。
我们在滑块周围放置一个包装div,后面跟着CSS:
.slider-wrapper {
width: calc(100% + 30px); //we need more width for the shadows on the edges
padding: 0 15px; //space for the shadows
margin-left: -15px; //put the div in its original position
overflow: hidden; //hide the overflow
}
我们使光滑列表div溢出可见:
.slick-list {
overflow: visible;
}
这是第一部分。
另一个问题是溢出中第一个元素的box-shadow仍然可见。
这应该解决它:
.slick-slide .drop-shadow {
box-shadow: none; //no shadow for a hidden slide
transition: box-shadow 0.1s ease-in-out; //little effect to fade the shadow
}
.slick-slide.slick-active .drop-shadow {
box-shadow: 0px 0px 43px 0px rgba(0, 0, 0, 0.35); //only the active slides have the shadow
}
这是另一个演示小提琴: https://jsfiddle.net/cc5fmwaL/2/
我希望我可以帮助别人,并随时修改这个快速解决方案。
答案 1 :(得分:2)
一个更简单的解决方案可能是:
.slick-list {
box-sizing: initial;
padding: 25px 0px;
}
答案 2 :(得分:0)
我不确定是否有任何副作用,但我将slick.js的来源从
.css({
'width':(100 / _.options.slidesPerRow) + '%',
'display': 'inline-block'
});
到
.css({
'width':(98 / _.options.slidesPerRow) + '%',
'display': 'inline-block'
});
这将为水平框阴影留一些空间