Bug in “Slide” Effect in Flex Mode

  • Resolved deewinc

    (@deewinc)


    5 years, 3 months ago

    Hello,

    There seems to be a bug when using “slide effect” in Flex mode.

    Let’s say you have 5 slides (1, 2, 3, 4, 5). When you scroll from slide 1 all the way to 5, everything works fine.

    The trouble begins when you’re in slide 1 and you want to scroll anti-clockwise to slide 5, when you’re in slide 5 and you want to move clockwise to slide 1.

    A blank slide temporarily shows up before showing the right slide. The issue happens when you use the “Arrows” or when you scroll using the touchscreen on a device (smartphone).

    Is there a fix for this?

Viewing 13 replies - 1 through 13 (of 13 total)
  • mohammedeisa

    (@mohammedeisa)

    5 years, 3 months ago

    Hi there,

    This issue doesn’t happen in my local installation. Can you please share the page URL where this issue exists?

    Also, does this issue happens when only MetaSlider and the Twenty Twenty One theme are active?

    Thread Starter deewinc

    (@deewinc)

    5 years, 3 months ago

    Hello,

    Here it is

    http://bit.ly/METABUGSLIDER

    I have removed the arrows for navigation. Try use a phone for now to see the issue.

    I will update the slider to include the arrows later when I get back on my workstation.

    Haven’t tried it on 20-21 theme. Will do so laters and see.

    Regards

    • This reply was modified 5 years, 3 months ago by deewinc.
    • This reply was modified 5 years, 3 months ago by deewinc.
    Thread Starter deewinc

    (@deewinc)

    5 years, 3 months ago

    Hello,

    You can confirm it now. I have updated it to include the arrows for navigation.

    Regards

    Thread Starter deewinc

    (@deewinc)

    5 years, 3 months ago

    Hello,

    The issue doesn’t show up when I’m logged in the WordPress admin. So, I figured out it might be some cache issue.

    I cleared the browser cache and hard reloaded the page. The error now doesn’t show up.

    Thanks for taking time to try solve the issue. Turns out it’s nothing at all. Just browser cache issues.

    Thread Starter deewinc

    (@deewinc)

    5 years, 3 months ago

    Hello,

    I think the metaslider is in conflict with my cache plugin. Can you give me the JS files that I should exclude from minifying please?

    The issue is back again =(

    Regards

    • This reply was modified 5 years, 3 months ago by deewinc.
    mohammedeisa

    (@mohammedeisa)

    5 years, 3 months ago

    Can you just try to exclude all the MetaSlider scripts? If there is an option to exclude directory files, then, you can exclude the “ml-slider” directory without quotes.

    Thread Starter deewinc

    (@deewinc)

    5 years, 3 months ago

    Hello,

    Unfortunately the plugin is W3TC, I love it from the way it handles JS and CSS files but it’s just a pain in the a** when it comes to excluding plugins from caching. You have to enter the scripts one at a time.

    It doesn’t have the option of excluding the whole directory. While that’s disheartening, most of the time you find that, excluding just a single script resolves the issue. So, there’s no need like to exclude everything. That’s how I work with it.

    I will try to exclude them one by one and see the one that works.

    • This reply was modified 5 years, 3 months ago by deewinc.
    Thread Starter deewinc

    (@deewinc)

    5 years, 3 months ago

    Hello,

    Finally, I have found it. It’s minifying the JS script, which handles EASING that’s causing the issue. So, I have excluded it from minifying.

    /wp-content/plugins/ml-slider/assets/easing/jQuery.easing.min.js

    mohammedeisa

    (@mohammedeisa)

    5 years, 3 months ago

    Thanks for sharing the file. Please let me know if you have any issues.

    Thread Starter deewinc

    (@deewinc)

    5 years, 3 months ago

    Hello,

    The issue came back again yesterday. And I have spent the whole of today testing the issue plugin by plugin to try and see if any plugin could be in conflict.

    And to my surprise, lazy loading the slides causes the issue. For as long as lazy loading is off the issue stops completely.

    Unfortunately, I’m planning to have several slides on a single page and lazy loading is a must to improve page loading time.

    Can you please investigate this issue further?

    Since the issue affects the arrows and scrolling on touch screen devices, (but not the dots navigation), disabling the animations effect when moving in between the last slide and first slide (clockwise) and first slide and last slide (anticlockwise) for arrows and scrolling can resolve that blank slide issue.

    • This reply was modified 5 years, 3 months ago by deewinc.
    mohammedeisa

    (@mohammedeisa)

    5 years, 3 months ago

    Hi,

    The lazy load plugin does the work on the images and causes this issue and we can’t do anything from our side after they already lazy-loaded the images.

    I think that the lazy load plugin should enhance their way to handle the images.

    My advice is to contact them to fix this issue.

    Regards,
    Mohammed.

    Thread Starter deewinc

    (@deewinc)

    5 years, 3 months ago

    The issue is also present when using Autoptimize and WP Rocket lazy loading too.

    That means I will have to contact all developers that provide plugins with lazy loading.

    I think it’s best that you investigate the issue further and see if you can fix it.

    This is a beautiful plugin.

    Thread Starter deewinc

    (@deewinc)

    5 years, 3 months ago

    Hello,

    I have raised the issue with W3TC support. It seems it’s an issue affecting cache plugins out there.

    https://ww.wp.xz.cn/support/topic/w3tc-creating-a-blank-image-slide-in-image-slider-lazy-loading/

    I’ll close this thread for now.

Viewing 13 replies - 1 through 13 (of 13 total)

The topic ‘Bug in “Slide” Effect in Flex Mode’ is closed to new replies.