CODEWITHSUNDEEP
javascriptsliderslideshownivo-slider
Miles M.
Miles M.

Reputation: 4169

How do I give a specific transition effect for nivo slider based off od prev or next arrows?

I'm looking into causing a specific transition effect based off of the arrow the user clicks on.

so I saw this post and I'm trying to adapt it my way, without success.

So I have those images :

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

and I would like that, if the user click on that arrow :

<a class="nivo-prevNav">Prev</a>

he has a specific effect, so I tried this :

$('.nivo-prevNav').on('click', function(){
       $('#slider img').attr("data-transition","slideInLeft");
  });

without success ...

EDIT: Thanks to roine, I've made this function working, but I have one last question, first, when I click on the arrow, it appears to change the transition effect only the second time I click on it. My understanding of that is that the first time I click on the arrow, I apply changes on the picture, and then, the second time, thoses changes are taken in consideration by the process of nivo slider.

So I saw those lines in the nivo slider customisation:

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

Maybe I should call the function here ?

Thanks

Upvotes: 1

Views: 1226

Answers (1)

Miles M.
Miles M.

Reputation: 4169

I found a solution 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");
    });

Upvotes: 2

Related Questions