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

Question

I'm trying to have a slideshow with next / previous buttons. I'm using NivoSlider for the cool transitions, and raphaelJS for animated next / previous buttons. My only issue is that there is no built in way to give an element to Nivoslider that represents the next button. Because my element is a triangle that animates I need someway to let NivoSlider know that I want $(triangle.node) to represent next & previous. The library is private (I think that's how you express that) so it can't see the triangle.node global. Any ideas?

Dylan Valade · Accepted Answer · 2015-02-01T14:22:41.697

Add this code before you initialize Nivo Slider and replace the parameters with your triangleNodePrev / Next. This has the advantage of disabling the default action on your links so that if you use href="#" the browser doesn't scroll back to the top of the page.

$('#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();
    });

score 3 · Answer 2 · answered Jul 26 '11 at 19:23

3

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

That should do it but in any case the commands you need are

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

and

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

answered Jul 26 '11 at 19:23

Joseph Marikle

76,418
17
112
129

+1 for the right approach. I took what you had and posted a slightly more complicated answer because I think the prevent default and single function make it worth the extra lines. – Dylan Valade Jul 27 '11 at 17:12
I chose the other answer but thank you for this solution as well. +1. – Rey Jul 29 '11 at 13:15
1

that's cool. I like Dylan's solution better too. :P Thanks for the +1 :) – Joseph Marikle Jul 29 '11 at 13:50
This one is much better answer. – Muhammad Irfan May 24 '13 at 12:18

score 1 · Answer 3 · answered May 14 '14 at 05:40

<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>

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

3 Answers3