javascript - 如何根据上一个或下一个箭头为 nivo slider 提供特定的过渡效果？

Question

我正在研究根据用户点击的箭头产生特定的过渡效果。

所以我看到了this post我正在尝试以我的方式进行调整，但没有成功。

所以我有那些图片:

<div id="slider" class="nivoSlider">
    <?php   foreach($SlideShowImages as $SlideShowImage){
    ?>
        <img src="<?php echo base_url($SlideShowImage['image_url']);?>" data-thumb="" alt="Image SlideShow"/>
    <?php
    }
    ?>
    </div>

如果用户点击那个箭头，我会喜欢:

<a class="nivo-prevNav">Prev</a>

他有特定的作用，所以我试了这个:

$('.nivo-prevNav').on('click', function(){
       $('#slider img').attr("data-transition","slideInLeft");
  });

没有成功...

编辑:感谢 roine，我已经让这个功能起作用了，但我还有最后一个问题，首先，当我点击箭头时，它似乎只在我第二次点击它时才改变过渡效果。我对此的理解是，第一次单击箭头时，我在图片上应用了更改，然后，第二次，nivo slider 的过程考虑了这些更改。

所以我在 nivo slider 自定义中看到了这些行:

beforeChange: function(){}, // Triggers before a slide transition
afterChange: function(){}, // Triggers after a slide transition

也许我应该在这里调用函数？

谢谢

Answer 1

我找到了解决方案 here :

// Assigning a Specific Effect to the Prev/Next Buttons
    $('.nivo-prevNav').live('mouseover', function(){
         $('#slider img').attr("data-transition","sliceUpDown");
    });

    $('.nivo-nextNav').live('mouseover', function(){
         $('#slider img').attr("data-transition","sliceUpDownLeft");
    });