javascript - Nivo Slider (raphaeljs) 的外部控件(下一个/上一个)？

Question

我正在尝试使用下一个/上一个按钮进行幻灯片放映。我使用 NivoSlider 进行炫酷的过渡，使用 raphaelJS 制作动画的下一个/上一个按钮。我唯一的问题是，没有内置方法可以为 Nivoslider 提供代表下一个按钮的元素。因为我的元素是一个动画三 Angular 形，所以我需要以某种方式让 NivoSlider 知道我想要 $(triangle.node) 代表下一个和上一个。该库是私有(private)的(我想这就是你表达的方式)所以它看不到 triangle.node 全局。有什么想法吗？

Answer 1

在您初始化 Nivo Slider 并将参数替换为您的 triangleNodePrev/Next 之前添加此代码。这样做的好处是可以禁用链接上的默认操作，这样如果您使用 href="#"，浏览器就不会滚动回页面顶部。

$('#previousButton, #nextButton').on('click', function (e) {

         // Prevent the link from being followed
         e.preventDefault();

         // Initialize variables 
         var buttonId = this.id,
          buttonClass = ('previousButton' == buttonId) ? '.nivo-prevNav' : '.nivo-nextNav';

         // Trigger the slider button
         $('.nivo-directionNav').find(buttonClass).click();
    });