Issue with Easy Slider + image rollover

Hey CatchPR-Sa-Ra,

Thank you for the inquiry.

Looks like the gap or space below the slider only occurs on page load. It gets removed once we manually resize the browser. Adding this script in the functions.php might help.

 function ava_enqueue_custom_script_resize() {
    if ( wp_script_is( 'avia-default', 'registered' ) ) {
        wp_add_inline_script( 'avia-default', "(function($){	
            var int = window.setInterval(function(){
                $(window).trigger('av-content-el-height-changed');
            }, 1500);

            $(window).on('load', function() {
                setTimeout( function() {
                    clearInterval(int);
                }, 1000 );  
            });
        })(jQuery);" );
    }
 }
 add_action( 'wp_enqueue_scripts', 'ava_enqueue_custom_script_resize', 9999);

The script above should trigger a resize event every 1.5 seconds and stops once the page is fully loaded.

Best regards,
Ismael

Hi,

Thank you for the update.

We cannot reproduce the same issue on our end, so it is probably cause by a plugin or a custom script. Did you copy the code directly from this forum?

For the image overlay or “rollover”, please try this code in the Quick CSS field.

.avia-image-container.av-hover-grow, .avia-image-container.av-hover-grow .avia-image-container-inner, .avia-image-container.av-hover-grow .avia-image-overlay-wrap a.avia_image {
    overflow: hidden;
}

Make sure to toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the css code.

Best regards,
Ismael

Hi,

Great, I’m glad that you got it working, and thanks for the update. Please let us know if you should need any further help on the topic or if we can close it.

Best regards,
Rikard