Hello!

I use the fotorama slider on the site.

Help me figure out what I'm doing wrong. I need to show text smoothly with each active slide, for example, the first one after 1.5 seconds, and the second after 2 seconds. The original text is hidden.

Here is an example .

if($('.fotorama__stage__frame').hasClass('fotorama__active')){ $(this).children('#kkk').delay(1500).show(1000); $(this).children('#kkk2').delay(2000).show(1000); }

If you have any suggestions how to do otherwise, I will be glad to consider.

    1 answer 1

    I think jquery use is not necessary in your case. In fotorama, the class="fotorama__active" added to the active slide, and to the class="fotorama__fade-front" .

    In simple terms, when the slide is not yet active, the div in which your picture lies, the fotorama__fade-front class is fotorama__fade-front , after the time for someone to show the slide, the fotorama__fade-front class is deleted and fotorama__active added fotorama__active . Based on this, you can take advantage of this opportunity.

    As far as I remember in the documentation, in order to add text, you need to write the following:

     <div data-img="images/75bdec4a063c.jpg"><p class="zoom-fotorama">Текст</p></div>

    Add a class to the <p> tag, for example, zoom-fotorama . Next, take an example of styles from Animate.css :

     @keyframes zoomIn { from { opacity: 0; transform: scale3d(.3, .3, .3); } 50% { opacity: 1; } } @keyframes zoomOut { from { opacity: 1; } 50% { opacity: 0; transform: scale3d(.3, .3, .3); } to { opacity: 0; } }

    Next, we write the following rules for the text:

     p.zoom-fotorama{ opacity: 0; }

    This will allow us to continue to show the text smoothly, since if the text is visible by default, it will first appear, and only then the described styles will work on it, which is not very nice. Styles:

     .fotorama__active .fotorama__html p.zoom-fotorama { opacity: 1; animation-name: zoomIn; -webkit-animation-duration: 500ms; animation-duration: 500ms; -webkit-animation-fill-mode: both; animation-fill-mode: both; }

    Now we will describe the styles for the text when switching the slide to the following:

     .fotorama__fade-front .fotorama__html p.zoom-fotorama { opacity: 1; animation-name: zoomOut; -webkit-animation-duration: 500ms; animation-duration: 500ms; -webkit-animation-fill-mode: both; animation-fill-mode: both; }

    Now, with the active slide, your text will appear smoothly and fade out smoothly when you switch to the next slide.

    I showed only an example of implementation for the smooth appearance and smooth disappearance of the text. You can, of course, do everything for yourself individually :)

    • Super! Thanks! :) - Dima