Nivo滑块(raphaeljs)的外部控制(下/上)

External Controls (Next / Prev) for Nivo Slider (raphaeljs)?

本文关键字：控制 滑块 raphaeljs Nivo 外部      更新时间：2023-09-26

我试图有一个幻灯片与下一个/上一个按钮。我用NivoSlider来做很酷的过渡，用raphaelJS来做动画的next/previous按钮。我唯一的问题是，没有内置的方式来给Nivoslider一个元素来表示下一个按钮。因为我的元素是一个会动的三角形，所以我需要通过某种方式让NivoSlider知道我想要$(triangle.node)来表示下一个&以前的。图书馆是私人的(我想这就是你的表达方式)，所以它看不到三角形。节点全球。什么好主意吗?

在初始化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();
    });

$("#triangleNodePrev").click(function(){$(".nivo-directionNav .nivo-prevNav").click()})
$("#triangleNodeNext").click(function(){$(".nivo-directionNav .nivo-nextNav").click()})

That 应该做它但是在任何情况下，您需要的命令都是

$(".nivo-directionNav .nivo-prevNav").click()

和

$(".nivo-directionNav .nivo-nextNav").click()

<script type='text/javascript'>
$(document).ready(function() {
    jQuery("#previousButton').click(function (e) {
         e.preventDefault();
         jQuery(".nivo-directionNav .nivo-prevNav").click();
    });
    jQuery("#nextButton').click(function (e) {
         e.preventDefault();
         jQuery(".nivo-directionNav .nivo-nextNav").click();
    });
});
</script>
相关文章：