光滑的轮播有限，左对齐，最后一张幻灯片后没有空白。 可能吗？

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

“占位符”修复已被 owner 删除。

我找到了一种最小化空格的方法。 我的解决方案涉及检测最后一个滑块项目是否可见，然后仅禁用“下一步”按钮以防止进一步滚动。

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