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

“占位符”修复为removed by owner。

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

用于检查元素是否可见的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;
}

现在将事件添加到轮播中

$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

光滑的旋转木马有限，左对齐，最后滑动后没有空白区域。可能？

2 个答案: