Question

我正在为项目使用光滑的滑块jQ插件。我已经使用同步滑块降低了功能，但导航滑块设置为显示5张幻灯片，但它显示5 1/2幻灯片。有没有更好的方法来设置它？

参考屏幕截图： https://everythingfonts.com/otf-to-woff

来源：

// Plugins
$(function() {
"use strict";

  // testimonial slider
  $('.js-items-slider-container .slider-for').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    fade: true,
    asNavFor: '.js-items-slider-container .slider-nav',
    
  });
  // testimonial slider nav
  $('.js-items-slider-container .slider-nav').slick({
    slidesToShow: 5,
    slidesToscroll: 1,
    asNavFor: '.js-items-slider-container .slider-for',
    dots: false,
    centerMode: true,
    focusOnSelect: true,
    arrows: true,
    onAfterChange: function (slide, index) {
        jQuery('.current-slide').removeClass('current-slide');
        jQuery(this.$slides.get(index)).addClass('current-slide');
      },
      onInit: function (slick) {
        jQuery(slick.$slides.get(0)).addClass('current-slide');
      }
  });

});

<section class="band testimonials-band">
  <div class="container">
    <div class="small-12 large-10 large-centered columns">
      <div class="items-slider-container js-items-slider-container">
        <div class="slider-for">
          <div>
            <h4>Everything went well from my initial appointment to installation. I'm excited to see the difference on my monthly bills using solar and not paying so much to the power company.</h4>
            <p>- Domenick DiSimone  <span class="loc">Nutley, New Jersey</span></p>
          </div>
          <div>
            <h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa commodi natus accusantium quisquam modi eaque laborum quo, harum eligendi iusto suscipit sunt, unde, placeat deleniti magnam! Veniam odio ipsam hic.</h4>
            <p>- John Doe <span class="loc">Nutley, New Jersey</span></p>
          </div>
          <div>
            <h4>Everything went well from my initial appointment to installation. I'm excited to see the difference on my monthly bills using solar and not paying so much to the power company.</h4>
            <p>- Domenick DiSimone  <span class="loc">Nutley, New Jersey</span></p>
          </div>
          <div>
            <h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa commodi natus accusantium quisquam modi eaque laborum quo, harum eligendi iusto suscipit sunt, unde, placeat deleniti magnam! Veniam odio ipsam hic.</h4>
            <p>- John Doe <span class="loc">Nutley, New Jersey</span></p>
          </div>
          <div>
            <h4>Everything went well from my initial appointment to installation. I'm excited to see the difference on my monthly bills using solar and not paying so much to the power company.</h4>
            <p>- Domenick DiSimone  <span class="loc">Nutley, New Jersey</span></p>
          </div>
          <div>
            <h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa commodi natus accusantium quisquam modi eaque laborum quo, harum eligendi iusto suscipit sunt, unde, placeat deleniti magnam! Veniam odio ipsam hic.</h4>
            <p>- John Doe <span class="loc">Nutley, New Jersey</span></p>
          </div>
        </div>
        <!-- END Top Slider -->

        <div class="slider-nav show-for-large">
          <div><img src="//placehold.it/130x130&text=first" alt=""></div>
          <div><img src="//placehold.it/130x130" alt=""></div>
          <div><img src="//placehold.it/130x130" alt=""></div>
          <div><img src="//placehold.it/130x130" alt=""></div>
          <div><img src="//placehold.it/130x130" alt=""></div>
          <div><img src="//placehold.it/130x130" alt=""></div>
        </div>
        <!-- END slider nav -->
      </div>
      <!-- END Slider -->
    </div>
  </div>
</section>

Answer 1

最好使用光滑滑块的响应选项，因为它可以满足多种屏幕尺寸，就像这样

$('.responsive').slick({
  dots: true,
  infinite: false,
  speed: 300,
  slidesToShow: 4,
  slidesToScroll: 4,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
    // You can unslick at a given breakpoint now by adding:
    // settings: "unslick"
    // instead of a settings object
  ]
});

或使用可变宽度

$('.variable-width').slick({
  dots: true,
  infinite: true,
  speed: 300,
  slidesToShow: 1,
  centerMode: true,
  variableWidth: true
});

Answer 2

我最终需要将列填满或以11列为中心（基础框架）。

还要垂直对齐图像：https://github.com/kenwheeler/slick/issues/281

Answer 3

添加centerPadding：'0'应该可以解决问题：

$('.js-items-slider-container .slider-nav').slick({
   slidesToShow: 5,
   slidesToscroll: 1,
   asNavFor: '.js-items-slider-container .slider-for',
   dots: false,
    centerPadding: '0',
   centerMode: true,
  focusOnSelect: true,
  arrows: true,
  onAfterChange: function (slide, index) {
    jQuery('.current-slide').removeClass('current-slide');
    jQuery(this.$slides.get(index)).addClass('current-slide');
  },
  onInit: function (slick) {
    jQuery(slick.$slides.get(0)).addClass('current-slide');
  }
});

您可能需要设置更多样式，但这应该是一个好的开始。（为将来的Google员工添加，我认为原来的海报已经解决了）

光滑滑块 - 切断图像

3 个答案: