【问题标题】:Center active slide with showing 3 slides in slick.js在 slick.js 中显示 3 张幻灯片的中心活动幻灯片
【发布时间】:2016-05-03 14:25:52
【问题描述】:

我正在使用slick.js 插件,我想在他们的网站上制作类似的东西。这里是DEMO

问题是,第一张活动幻灯片1 没有居中。我知道我可以使用

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

但是没有 3 张幻灯片,还有另外 2 张幻灯片的一部分,请参阅HERE

【问题讨论】:

    标签: javascript jquery html css slick.js


    【解决方案1】:

    嗯,这太尴尬了。它所需要的只是将选项centerPadding 设置为0(除了将centerMode 设置为true)。我不知道为什么我以前没有见过这个。无论如何,这是我的 1 个月更新:

    WORKING DEMO

    【讨论】:

      【解决方案2】:

      如果我正确理解了您的问题,您将不得不以编程方式隐藏部分幻灯片。如果这个功能本身就存在,那就太好了,但事实并非如此。也许在未来的版本中。

      请阅读 cmets 以简要了解我正在做的事情:

      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();
      });
      

      Fiddle Demo

      【讨论】:

      • 这正是我想要的,但两侧有一个空间......无论如何,谢谢。
      • "执行函数以在 dom 就绪时应用可见性。" — 使用init Event 可能会更好
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2016-12-26
      • 2020-06-30
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2014-05-04
      相关资源
      最近更新 更多