Change default arrow navigation to making a blinking arrow

Question

I want to use the default buttons that In5 provides because I like the hover over states.The client wants the first pages arrow to blink - so i created an animated gif and swapped that out in the images folder. I tried adding an animated feature in the CSS on the static image but that didn't work. I don't want any of the other arrows to blink in the book. So I created 2 styles for the nav - one with the animated gif, and one thats a static image. I want to make the rest of the pages in the book use the static image as the nav, but I'm not sure where or how to change the code to do that. This might be a little over my head, but any advice would help!

Answer 1

I would recommend using CSS3 animation to handle the blink. And target the arrow on load.

CSS (attach as a .css file in the Resources section of the in5 dialog):

.blink {
      animation: blink 1s steps(5, start) infinite;
      -webkit-animation: blink 1s steps(5, start) infinite;
    }
    @keyframes blink {
      to {
        visibility: hidden;
      }
    }
    @-webkit-keyframes blink {
      to {
        visibility: hidden;
      }
    }

JavaScript (attach as a .js file in the Resources section):

$(function(){
$('#slider').on('initialized', function(){
    $('.anythingSlider-in5 .arrow.forward').addClass('blink');
    $('#slider').one('slide_begin',function(){
        $('.anythingSlider-in5 .arrow.forward').removeClass('blink');
    });
});

It will add the blink class to the forward arrow when the slider is initialized, then remove it after you leave page 1 for the first time.