滑动滑块 - 切断图像

Question

我使用滑动滑块jQ插件作为项目。我使用同步滑块获得了功能，但导航滑块设置为显示5张幻灯片，但它显示了5 1/2张幻灯片。有没有更好的方法来设置它？

截图供参考：

来源：

// 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

我最终需要充分的列或11个栏目中心（基础架构）。

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

Answer 2

最好使用华而不实的滑块的响应选项，因为它会迎合多种屏幕尺寸，这样的事情

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