光滑的旋转木马有限，左对齐，没有白色空间后，最后的幻灯片.可能的

Question

使用旋转木马(http://kenwheeler.github.io/slick/)

使用有限的，非居中的(所以左对齐)滑动条，当到达最后一张幻灯片时，我希望最后一张幻灯片紧贴在右边，不留下空白。

这可能吗?

$('.slider').slick({
slidesToScroll: 1,
infinite: false,
variableWidth: true,
dots: true,
speed: 300,
slidesToShow: 1,
centerMode: false
});

https://jsfiddle.net/mr_antlers/jw5a9prf/

Answer 1

所有者已删除'占位符'修复。

我找到了一种最小化空白的方法。我的解决方案包括检测最后一个滑块项是否可见，然后禁用"下一步"按钮以防止进一步滚动。

1. 检查元素是否可见的Javascript函数

   function isVisible($parent, $child) {
   var parentWidth = $parent.outerWidth(),
       parentHeight = $parent.outerHeight(),
       parentPos = $parent.offset(),
       childPos = $child.offset(),
       childWidth = $child.outerWidth(),
       childHeight = $child.outerHeight();
   var isVisibleX = (childPos.left >= parentPos.left && 
           (childPos.left + childWidth) <= (parentPos.left + parentWidth));
   var isVisibleY = (childPos.top >= parentPos.top && 
           (childPos.top + childHeight) <= (parentPos.top + parentHeight))  
   return isVisibleY && isVisibleX;
   }
   

2. 现在为您的carousel添加一个事件

   $carousel.on('afterChange', function(){
       var isVisible = isVisible($('.slider'), $('.slider').find('.slick-slide').last()); 
       if (isVisible) {
           $('.slider').find('.slick-next').hide();
       } else {
           $('.slider').find('.slick-next').show();
       }
   });
   

Answer 2

添加

float:left;

.slick-track