Question

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

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

我无法理解，是来自js还是来自css ......看起来它来自css但是我不知道从哪里......

它应该是一个translateX效果，但我找不到合适的效果..

Answer 1

根据我使用JQuery滑块的经验：

幻灯片放在HTML列表中。代码按顺序导航到每个列表项，将一个视图推出到下一个列表项。好吧，一旦它到达终点，唯一的方法是向后，所以它必须撤回回去。以另一种方式做这件事更复杂。所以它并没有那么多，它具有不同的效果，只是按照它所做的去做。

代码就在这里：

$('.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创建的样式向左和向右移动。

为了完成所有相同的操作，您可以更轻松地找到另一个滑块。这个是为了做它的设计目的而设计的。你必须完全改变CSS和JS才能使它做任何不同的事情。

有无数的JQuery滑块都有自己的动画和关于它们的特权。找到一个符合你需求的东西应该不难。

如何让英雄滑块始终朝着同一个方向前进

1 个答案: