如何根据上一个或下一个箭头给出nivo滑块的特定过渡效果？

我正在考虑根据用户点击的箭头引起特定的过渡效果。如何根据上一个或下一个箭头给出nivo滑块的特定过渡效果？

所以我看到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滑块的过程考虑了这些更改。

所以我看到NIVO滑块定制这些线路：

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

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

感谢

来源

2012-08-03 Miles M.

数据 - *属性应使用如下：$（ '＃滑块IMG'）dataset.transition = “slideInLeft” – 2012-08-03 02:07:45

ERF仍没有效果，但我认为我的问题来自$（'。nivo-prevNav'）。on（'click'，function（）{因为我没有任何警报，所以在函数中加入警报。你？ – 2012-08-03 02:53:12

你使用哪个版本的jquery？在1.7以后试着使用live而不是on。$（'。nivo-prevNav'）。live（'click'，function（）{ $（'＃sliding呃img'）。attr（“data-transition”，“slideInLeft”）; }）; – 2012-08-03 03:41:39

我找到了解决办法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"); 
    });

来源

2012-08-04 19:07:44

如何根据上一个或下一个箭头给出nivo滑块的特定过渡效果？

回答

相关问题