• Resolved rodrigo1099

    (@rodrigo1099)


    Is it possible to get a Ken Burns Effect on the Meta Slider (i.e. slow panning left or right while zooming out)? I can’t find any such features in the admin tools.

    I’m running MetaSlider v3.15.3, on WordPress 5.3.2 at Bluehost.

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

Viewing 15 replies - 1 through 15 (of 22 total)
  • Plugin Contributor kbatdorf

    (@kbat82)

    Hi,

    None of the libraries we support have the Ken Burns effect. However, searching Google I found someone who has used FlexSlider to get the effect working.

    https://codepen.io/ariona/pen/gpxGmM

    If you want to set this up in MetaSlider I can help you filter the attributes as needed. It will be a little advanced though. Let me know.

    Thread Starter rodrigo1099

    (@rodrigo1099)

    Yes, please. I’ve been using MetaSlider for years, and I’d like to stick with it. What would I have to do to add the Ken Burns feature?

    Plugin Contributor kbatdorf

    (@kbat82)

    Hi @rodrigo1099

    Do you know how to create an mu-plugin or otherwise add php code to your site?

    You will have to add the code from here to your site, and update the $slideshow_id to match.

    https://gist.github.com/KevinBatdorf/f2b97fbd625da0ab45e1d744c89b44b5

    You can see it here (note I’m using the “Simply Dark” theme): https://tests.kevinbatdorf.com/metaslider-ken-burns-effect/

    Or if that URL is offline (if someone is viewing this thread months/years later), you can see it here: https://www.youtube.com/watch?v=Rz-AB0ssFbo

    You can adjust the slide delay under Advanced Settings to change the transition times.

    Let me know if you have any questions or if something isn’t working properly.

    Plugin Contributor kbatdorf

    (@kbat82)

    Hi @rodrigo1099

    I didn’t hear back so I’ll mark this as resolved. Let me know if you have any questions.

    Thread Starter rodrigo1099

    (@rodrigo1099)

    So, sorry! I’m new on this board and did not realize there was a time limit for replies. I got wrapped up in other pressing deadlines, and have not yet tried your suggestions. Please keep this discussion open until the issue is resolved.

    P.S. I have never worked with mu-plugins, but I am eager to learn, and yes, I know how to add PHP code to my site. I will try your suggestions and get back to you ASAP, hopefully by tomorrow, but maybe over the weekend.

    Plugin Contributor kbatdorf

    (@kbat82)

    Hi

    I’m new on this board and did not realize there was a time limit for replies.

    There isn’t a time limit but issues often go stale here and to users it appears as though we have “xx unresolved issues” which turns people off from using the plugin.

    Anyway, the code above should work (did you see the demo?). Just add that file to the mu-plugins folder on your server and update the slideshow id at the top.

    More on mu-plugins: https://wordpress.org/support/article/must-use-plugins/

    Thread Starter rodrigo1099

    (@rodrigo1099)

    Sorry for the delay, and thanks for your patience.

    Re: your MetaSlider demo. On my screen, the Ken Burns effect works fine, but the slider stops after each image, and will not proceed until the next image is manually selected. Is that intentional?

    MetaSlider Ken Burns Effect
    https://tests.kevinbatdorf.com/metaslider-ken-burns-effect/

    By contrast, the FlexSider demo which you linked DOES move smoothly from image to image, which is the effect that I want.

    DEMO: Simple Kenburn Effect on FlexSlider
    https://codepen.io/ariona/pen/gpxGmM

    Re: php code
    When you asked if I knew how to add PHP to my site, perhaps I should have said “sort of” rather than “yes.” I will need a little more step-by-step guidance.

    It appears that you want me to create a file called metaslider-ken-burns-effect.php, then change the $slideshow_id number to match mine.

    Once I’ve done that, where am I supposed to put this new file?

    Plugin Contributor kbatdorf

    (@kbat82)

    Hi,

    The slideshow should be on autoslide. Does it work like you see it on YouTube? ANyway, try it with yours and see if it autoslides. The animation speed of the effect is controlled by the slide delay setting, so it should match up.

    You can put the file in the wp-content/mu-plugins folder and it should load automatically.

    Thread Starter rodrigo1099

    (@rodrigo1099)

    Okay, I see that the glitch is browser specific.

    When viewed through Safari and iCab, your demo flows smoothly from image to image.

    When viewed through Firefox 73.0.1 and Google Chrome 80.0.3987.122, it stops after each image, and will not move until the next image is manually selected.

    Thread Starter rodrigo1099

    (@rodrigo1099)

    <i>Does it work like you see it on YouTube?</i>

    On YouTube it moves smoothly from image to image. When viewed through Firefox and Chrome, it stops after each image.

    Plugin Contributor kbatdorf

    (@kbat82)

    What OS are you on? I’ll see if we can get it tested. I’m using Windows right now and it’s loading fine for me everywhere.

    Do you see any errors in the dev tools?

    https://updraftplus.com/faqs/how-do-i-open-my-browsers-developer-tools/

    Plugin Contributor kbatdorf

    (@kbat82)

    But more importantly, does it work on your site?

    Thread Starter rodrigo1099

    (@rodrigo1099)

    I’m using macOS Mojave 10.14.5 on a MacBook Pro (15-inch, Mid-2012).

    I’ll need a few minutes more to get this working on my site.

    Thread Starter rodrigo1099

    (@rodrigo1099)

    When I put the file into wp-content/mu-plugins, my header image completely whited out.

    I cut and pasted your code exactly as is, named the file metaslider-ken-burns-effect.php, and changed the $slideshow_ID number, as instructed.

    Did I leave out a step somewhere?

    Plugin Contributor kbatdorf

    (@kbat82)

    Looks like some styles from your theme getting in the way.

    Try adding this. You might have to adjust it though to the height you need.

    .kenburns-effect .flexslider .slides > li {
        min-height: 100vh;
    }
Viewing 15 replies - 1 through 15 (of 22 total)
  • The topic ‘Ken Burns Effect on Meta Slider?’ is closed to new replies.