When use a fullscreen slideshow, the images look good on desktop, but on mobile, they are usually cut off because the mobile screen only shows the center part of the image. I've tried setting background-position-x for the images on mobile devices, but it looks terrible as you can see on this link: http://cchc.nycweb.io/%e7%a4%be%e5%8c%ba%e6%9c%8d%e5%8a%a1/%e6%80%a1%e5%ba%b7%e8%80%81%e4%ba%ba%e4%b8%ad%e5%bf%83 - the images "jump" to the position set by CSS after each slide's transition.
Is there anyway to overcome this with or without coding?

I've read the documentation of slideshow component. There is an event "beforeshow.uk.slideshow" that looks promising - maybe I can change the slide's background-position before the transition so the images don't jump. But their documentation is very dry about how to use javascript. So I have to try it out myself:

The Dom is like:

<div class="uk-slidenav-position" data-uk-slideshow="{

        autoplay:false,

        autoplayInterval:7000,

        kenburns:false,

        animation:'random-fx',

        duration:500,

        pauseOnHover:false,

        height:'auto'

    }">

            <ul class="uk-slideshow uk-overlay-active" style="height: 845px;">

     ......

What I did is run this in the console after page is loaded:

UIkit.slideshow('.uk-slidenav-position').on('beforeshow.uk.slideshow',console.log(1))

But it doesn't work.