jquery 居中活动幻灯片,在slick.js中显示3张幻灯片

vxbzzdmp  于 2023-02-03  发布在  jQuery
关注(0)|答案(2)|浏览(195)

我正在使用slick.js插件,我想在他们的网站上做一些类似的东西。这里是DEMO
问题是,第一张活动幻灯片1没有居中。我知道我可以使用

$('.slider-nav').slick({
    slidesToShow: 3,
    slidesToScroll: 1,
    asNavFor: '.slider-for',
    dots: true,
    focusOnSelect: true,
    centerMode: true
});

但不是3张幻灯片,而是另外2张幻灯片的一部分,参见HERE

bvjxkvbb

bvjxkvbb1#

好吧,这太尴尬了。所有它需要的是设置选项centerPadding0(旁边设置centerModetrue)。我不知道为什么我以前没有看到过这一点。无论如何,这里是我的1个月更新:

    • 一个
sz81bmfz

sz81bmfz2#

如果我没理解错你的问题,你将不得不通过编程隐藏部分幻灯片。如果这个功能在本机就存在,那就太好了,但它没有。也许在未来的版本中。
请阅读评论,了解我正在做的事情的简要概述:

function setSlideVisibility() {
  //Find the visible slides i.e. where aria-hidden="false"
  var visibleSlides = $('.slider-nav > .slick-list > .slick-track > .slick-slide[aria-hidden="false"]');
  //Make sure all of the visible slides have an opacity of 1
  $(visibleSlides).each(function() {
    $(this).css('opacity', 1);
    console.log($(this).html());
  });
  //Set the opacity of the first and last partial slides.
  $(visibleSlides).first().prev().css('opacity', 0);
  $(visibleSlides).last().next().css('opacity', 0);
}

//Execute the function to apply the visibility on dom ready.
$(setSlideVisibility());

//Re-apply the visibility in the beforeChange event.
$('.slider-nav').on('beforeChange', function() {
  $('.slick-slide').each(function() {
    $(this).css('opacity', 1);
  });
});

//After the slide change has completed, call the setSlideVisibility to hide the partial slides.
$('.slider-nav').on('afterChange', function() {
  setSlideVisibility();
});

**一个

相关问题