Nivo Slider滑动解决方法（不总是朝一个方向滑动）

Question

首先，我想说我非常喜欢StackOverflow社区，浏览和在这里提问总能得到很大的帮助，非常感谢！

问题： 我有一个客户想要一个幻灯片，当按下右侧导航箭头时，图像可以从右向左滑动，当按下左箭头时则从左向右滑动。

目前，在nivo-slider（我通常使用的唯一一个）的配置文档中，我似乎无法获得除了始终向右或始终向左滑动之外的任何东西（slideInLeft、slideInRight）。

是否有任何方法可以，例如，描述按下哪个按钮，并运行该动画方法而不是通常的方法？

提前致谢， Aleski。

- Aleski

---

我有同样的问题。我尝试在更改prev/next链接时实时更改settings.effect设置，但这并不起作用。 - melat0nin

你找到解决方法了吗？我也在尝试弄清楚如何做这件事。 - Chris

Answer 1

我刚刚注意到这个问题 - 我回答了Chris的类似问题，这个解决方案也希望对您有用：

根据nivo滑块文档，您可以通过将自定义数据属性添加到任何或所有图像上来更改每个幻灯片的效果，并且它将覆盖nivo的默认转换：

<img src="images/slide1.jpg" alt="" data-transition="slideInLeft" />

您可以通过在文档主体上设置事件处理程序来查找按键并使用下面的代码段更改所有图像的attr来动态更改此自定义数据：

var $body = $("body");
var $images = $("img");

$body.on('keydown', function(e) {
  if(e.keyCode == 37) { // left 
     $images.attr("data-transition","slideInLeft");
  }
  else if(e.keyCode == 39) { // right
     $images.attr("data-transition","slideInRight");
            }
    });

- Greg Jennings

Answer 2

在“jquery.nivo.slider.js”中的注释“//自定义转换，由"data-transition"属性定义”之后添加以下代码，然后再添加注释“//运行效果”。这将在单击左箭头或右箭头或按钮时更改当前效果。为此，您必须在HTML中使用没有"data-transition"属性的图像，并且必须在"jquery.nivo.slider.js"中的注释“//默认设置”下定义默认效果，因为"data-transition"属性是首选。我现在正在为我的项目编写它。

        if(nudge === 'prev'){
            currentEffect = 'slideInLeft';
        } 
        else if (nudge === 'next'){
            currentEffect = 'slideInRight';
        }
        else if (nudge === 'control'){
            currentEffect = 'fade'; /*test*/
        }

- Severe Torture

---

除了将代码添加到nivo js文件中，我根本不理解那个答案中的任何内容。我应该将哪种效果设置为默认？ - Teilmann

默认效果对于这段代码并不重要，我可以更改默认效果为另一个想要的效果。如果没有这段代码，箭头和控制上只有相同的“默认”效果。在这个代码中，右箭头使用了“slideInLeft”效果；左箭头使用了“slideInRight”效果，并且在导航按钮上使用了“fade”效果。 - Severe Torture

Answer 3

我通过将以下代码放在jQuery.nivo.slider.js文件的nivoRun函数中（在初始化currentEffect变量之后）来解决这个问题：

if(settings.effect === 'slideInLeftRight')
{
    if(nudge === 'prev')
    {
        currentEffect = 'slideInRight';
    }
    else
    {
        currentEffect = 'slideInLeft';
    }
};

这段代码创建了一个名为slideInLeftRight的自定义效果。

当按下prev按钮时，slideInLeftRight效果将使用slideInRight效果；当按下next按钮时，它将使用slideInLeft效果。

像这样使用slideInLeftRight效果：

<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider({
        effect: 'slideInLeftRight',
        ...
    });
});
</script>

- Steve Van Opstal