jquery - 如何使英雄 slider 始终朝同一方向移动

Question

当 slider 到达最后一张图片时，它会转到第一张图片，女巫很好。唯一的问题是，它以不同的效果转到第一张图片(不是像往常一样向左移动，而是向右移动)......如何为所有幻灯片制作相同的效果？ (对于 cd-full-width)(图像向左移动，除了最后一个。从最后一个到第一个的过渡具有相反的效果......)

英雄 slider :http://codyhouse.co/gem/hero-slider/

我不明白，它是来自 js 还是来自 css... 好像是来自 css 但我只是不知道从哪里...

应该是translateX效果，但是找不到合适的..

Answer 1

根据我使用 JQuery slider 的经验:

幻灯片保存在一个 HTML 列表中。代码按顺序导航到每个列表项，将一个推到 View 之外以到达下一个。好吧，一旦它到达尽头，唯一的办法就是向后退，所以它必须缩回才能回去。以另一种方式执行此操作更为复杂。所以与其说它有不同的效果，不如说它只是按照它被告知的去做。

代码在这里某处:

$('.cd-slider-nav li').on('click', function(event){
    event.preventDefault();
    var selectedItem = $(this);
    if(!selectedItem.hasClass('selected')) {
        // if it's not already selected
        var selectedPosition = selectedItem.index(),
            activePosition = $('.cd-hero-slider .selected').index();
        if( activePosition < selectedPosition) {
            nextSlide($('.cd-hero-slider'), $('.cd-slider-nav'), selectedPosition);
        } else {
            prevSlide($('.cd-hero-slider'), $('.cd-slider-nav'), selectedPosition);
        }

        updateNavigationMarker(selectedPosition+1);
    }
});

基本上，当它到达列表末尾时，它会回到开头，就像我说的，它直观地显示了这一点。

是的，CSS 指定了它如何左右移动，但 JQuery 告诉它最后返回到幻灯片 1，使用 CSS 创建的样式左右移动。

为了让一切都一样，你会更容易找到另一个 slider 。这个设计是为了做它设计的事情。您必须完全更改 CSS 和 JS 才能使其执行任何不同的操作。

有无数的 JQuery slider ，它们都有自己的动画和额外功能。找到适合您需要的应​​该不难。