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

【问题标题】：Nivo Slider sliding workaround (not always sliding in one direction)Nivo Slider 滑动解决方法（并不总是向一个方向滑动）
【发布时间】：2012-01-26 15:19:44
【问题描述】：

让我在前面说一下我非常喜欢 stackoverflow 上的这个社区，它总是对浏览和作为问题有很大帮助，非常感谢！

问题。所以我有一个客户想要一个幻灯片，如果按下右导航箭头，可以从右->到->左滑动图像，如果按下左箭头，可以从左->到->右滑动。

目前在 nivo-slider 的配置文档中（它是我真正使用过的唯一一个），除了总是向右滑动或总是向左滑动（slideInLeft、slideInRight）之外，我似乎无法得到任何东西。

无论如何，例如，描绘哪个被按下，并运行该动画方法而不是通常的动画方法？

提前致谢，阿列斯基。

【问题讨论】：

我也有同样的问题。我尝试在更改上一个/下一个链接时即时更改 settings.effect，但这不起作用。
您找到解决方法了吗？我也在想办法做到这一点

标签： javascript jquery nivo-slider

【解决方案1】：

将此添加到“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*/
        }

【讨论】：

除了将代码添加到 nivo js 文件之外，我根本不理解该答案中的任何内容。我应该将哪种效果设置为默认值？
默认效果对于这段代码并不重要，我可以根据需要将默认效果更改为另一个。如果没有此代码，您对箭头和控件只有相同的“默认”效果。 => 右箭头上的代码使用 "slideInLeft" ；在左箭头“slideInRight”和导航按钮上使用“淡入淡出”效果。

【解决方案2】：

我刚刚注意到这个问题 - 我回答了Chris's similar question，希望这个解决方案也适用于您：

根据nivo slider documentation，您可以通过在任何或所有图像上添加自定义数据属性来更改每张幻灯片的效果，它将覆盖 nivo 的默认过渡：

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

您可以通过在文档正文上设置事件处理程序来动态更改此自定义数据以查找按键，然后使用下面的 sn-p 更改所有图像的属性：

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");
            }
    });

【讨论】：

【解决方案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>

【讨论】：