CODEWITHSUNDEEP
csswordpressanimationnivo-slider
web-dev
web-dev

Reputation: 151

Add dynamic text animation to nivo slider

Looking for the best approach to add dynamic text animations to a nivo slider. Trying to use animate.cssfor the animations but the text is not animating. I tried adding an animation to some text outside the slider and it works fine. So not sure why it doesn't work in the slider. Will include the nivo demo.html file I tried to modify. Any help would be appreciated. 

<head>
<title>Nivo Slider Demo</title>
<link rel="stylesheet" href="../themes/default/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../themes/light/light.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../themes/dark/dark.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../themes/bar/bar.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../animate.css" type="text/css" media="screen" />


<body>
<div id="wrapper">
    <a href="http://dev7studios.com" id="dev7link" title="Go to dev7studios">dev7studios</a>

    <div class="slider-wrapper theme-default">
        <div id="slider" class="nivoSlider">
            <img src="images/toystory.jpg" data-thumb="images/toystory.jpg" alt="" title="#htmlcaption1" />
            <a href="http://dev7studios.com"><img src="images/up.jpg" data-thumb="images/up.jpg" alt="" title="This is an example of a caption" /></a>
            <img src="images/walle.jpg" data-thumb="images/walle.jpg" alt="" data-transition="slideInLeft" />
            <img src="images/nemo.jpg" data-thumb="images/nemo.jpg" alt="" title="#htmlcaption" />
        </div>
        <div id="htmlcaption1" class="nivo-html-caption animated bounceIn">
            <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>. 
        </div>
        <div id="htmlcaption" class="nivo-html-caption animated bounceIn">
            <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>. 
        </div>
    </div>
    <div class="animated bounceIn" style="position: absolute; top: 300px; left: 30px;">
        <h1 style="font: 20px;">this is a test</h1>
    </div>
</div>
<script type="text/javascript" src="scripts/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="../jquery.nivo.slider.js"></script>
<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider({
        effect: 'fade'
    });
});
</script>

Upvotes: 0

Views: 1896

Answers (1)

Rubel Hossain
Rubel Hossain

Reputation: 2743

The abimatecss classes don't work directly, if you want to use the animatecss class you should use nivo slider's beforeChange and afterChange events, for example. OR Check My Github Project

customize nivo slider with animated caption

 $(window).on("load", function(){

    $(".slider-wrapper").nivoSlider({

         animSpeed    : 900,
         controlNav   : false,
         nextText     : '<i class="fa fa-chevron-right" aria-hidden="true"></i>',
         prevText     : '<i class="fa fa-chevron-left" aria-hidden="true"></i>',
         beforeChange : function(){

            $('.nivo-caption p').removeClass('animated slideInLeft').hide();
            $('.nivo-caption h2').removeClass('animated slideInRight').hide();
            $('.nivo-caption span button').removeClass('animated fadeInUp').hide();


         },
         afterChange : function(){

            $('.nivo-caption p').addClass('animated slideInLeft').show();
            $('.nivo-caption h2').addClass('animated slideInRight').show();
            $('.nivo-caption span button').addClass('animated fadeInUp').show();


         }

    });
 });

Upvotes: 0

Related Questions