Добавить динамическую текстовую анимацию в слайдер nivo

Ищите лучший подход для добавления динамических текстовых анимаций в слайдер nivo. Попытка использовать animate.css для анимации, но текст не анимируется. Я попытался добавить анимацию к некоторому тексту вне слайдера, и он отлично работает. Поэтому не уверен, почему он не работает в слайдере. Будет включать файл nivo demo.html, который я пытался изменить. Любая помощь будет оценена по достоинству.Добавить динамическую текстовую анимацию в слайдер nivo

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

источник

2015-09-10 web-dev

Возможно ли вы дать нам какие-либо URL? – gioNicol

Как включить файлы проекта, такие как файлы js stylesheets и изображения, в нечто вроде jsfiddle без необходимости комбинировать все css в один файл и все js в один файл? –

Разве это не Wordpress? Я предполагаю, что у вас есть домен ... – gioNicol

Классы abimatecss не работают напрямую, если вы хотите использовать класс animatecss вы должны использовать Nivo слайдера beforeChange и afterChange события, например. ИЛИ 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(); 


     } 

    }); 
});

источник

2017-03-01 10:56:11

Добавить динамическую текстовую анимацию в слайдер nivo

ответ

Смежные вопросы