css 如何在Slick转盘中将2个载玻片居中?

vawmfj5a  于 2023-07-01  发布在  其他
关注(0)|答案(3)|浏览(123)

我在我的项目中使用Slick,我需要将两张幻灯片居中。不幸的是,centerMode选项仅适用于奇数的slidesToShow计数。我试图通过CSS将活动幻灯片居中,但没有效果。
你知道什么解决办法吗?感谢您的评分
编辑:
我的carousel:https://jsfiddle.net/lukaszflorczak/y7t64oqs/
我想有1个小屏幕上居中的项目,下2,3等。非活动幻灯片的不透明度较低。

xnifntxz

xnifntxz1#

Slick Carousel center Mode with two slides is possible using variableWidth,you have to set width for each slide.之后,你必须移动slick-track半宽度的光滑幻灯片。
工作小提琴在这里:Slick slide - two slides in center mode

wbgh16ku

wbgh16ku2#

除了使用centerMode属性之外,还可以通过将.slick-track的水平边距设置为auto来居中Slick Carousel幻灯片。

.slick-track {
  margin-left: auto;
  margin-right: auto
 }
eqzww0vc

eqzww0vc3#

如果项目少于“slidesToShow”,可以使用INIT事件添加css类。

let slider = $('.reference-slider');

let slidesToShow = 3;

slider.on('init',function(event, slick, currentSlide){

    if (slick.$slides.length < slidesToShow) {
        $(this).find('.slick-track').addClass('slick-track-less-than-slidesToShow');
    }

});

slider.slick({
    slidesToShow: slidesToShow,
    slidesToScroll: 1,
    arrows: true,
    fade: false,
    dots: false,
    centerMode: true,
    centerPadding: '0px',
    lazyLoad: 'ondemand',
});

然后将Style添加到slick-track元素:

.slick-track.slick-track-less-than-slidesToShow {
       margin-left: 0;
   }

相关问题