• Resolved Attacking3rd

    (@attacking3rd)


    Hello,

    Is it possible to make the captions fade in and out just like the images? If so, how?

    I am using the Nivo Slider with the Fade effect.

    Notes:

    I used CSS to position the caption on top of the image and style the fonts.

    Our client did not like how the image first faded in then the caption suddenly appeared so we set the Animation speed to 100 to make the effect is not as noticeable. If we can fade in the caption the Animation speed would be increased.

    Thanks,

    robertg

    • This topic was modified 6 years, 10 months ago by Attacking3rd.
    • This topic was modified 6 years, 10 months ago by Attacking3rd.
    • This topic was modified 6 years, 10 months ago by Attacking3rd.

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • I guess this is a tricky one because NivoSlider updates the HTML instead of moving things around with CSS. You would have to write some custom code out. It looks like someone figured it out though. You can follow along here:

    https://www.soslignes-ecrivain-public.fr/More-animation-for-your-Nivo-Slider.html

    Adding options to the MetaSlider is easy also. If you want to add something like the options at the bottom of that article, you just follow this pattern:

    // Add options to nivoslider
    function attacking3rd_add_nivo_hooks($options, $slider_id, $settings) {
        $options['beforeChange'] = "function() { console.log('hi'); }";
        return $options;
    }
    add_filter('metaslider_nivo_slider_parameters', 'attacking3rd_add_nivo_hooks', 10, 3);
    Thread Starter Attacking3rd

    (@attacking3rd)

    Thank you for the quick reply and information. Thanks too for the example of adding options to MetaSlider – I was thinking I might have to do something like that.

    I appreciate your time and the support!

    robertg

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Caption Fade with Nivo Slider’ is closed to new replies.