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滑块的过程会考虑更改。

所以我在nivo滑块自定义中看到了这些行：

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

如何根据od prev或下一个箭头为nivo滑块提供特定的过渡效果？

1 个答案: