Nivo Slider滑动解决方案(不总是在一个方向上滑动）

Nivo Slider sliding workaround (not always sliding in one direction)

本文关键字：一个 方向 解决方案 Slider Nivo      更新时间：2023-09-26

让我在前面说我多么喜欢stackoverflow的这个社区，在这里浏览和提问总是很有帮助的，所以非常感谢！

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

目前，在nivo滑块的配置文档中（这是我唯一真正使用过的），除了总是向右滑动或总是向左滑动（slideInLeft，slideInRight）之外，我似乎什么都做不到。

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

提前感谢，Aleski。

将其添加到"jquery.novo.slider.js"之前的注释"//运行效果"之后的注释和代码"//由"数据转换"属性定义的自定义转换"中。如果单击左箭头或右箭头或按钮，将显示更改当前效果。对于这项工作，您必须在HTML中拥有没有"数据转换"属性的imageis，并且您必须在注释"//默认设置"下的"jquery.novo.slider.js"中定义默认效果，因为"数据转换"属性更可取。我为我的项目编写代码。

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

我刚刚注意到这个问题-我回答了Chris的类似问题，这个解决方案也应该对你有效：

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

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

您可以通过在文档主体上设置一个事件处理程序来查找按键，然后使用以下代码段更改所有图像的属性，从而动态地更改此自定义数据：

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

我通过在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>
相关文章：