[Feature Request] Ken burns / zoom slide effect when showing

[todd-kruger]

Please add the ability to make the slides zoom while displaying Example I found on codepen: https://codepen.io/ibanez182/pen/LZPgrY

Also for ADA/WCAG, please allow a pause button option

Otherwise this slider is the best modern slider! Thank you

[nicped]

Thank you for giving Swiffy Slider a spin and for your nice review!

Animation

I have created a new animation called .slider-nav-animation-zoomout that will give you something very close to the example you provided.

See it in action on the configuration page

It is a bit different because slides cannot blend into each other since Swiffy Slider is a horizontal scrolling div. But the effect is pretty close I think.

You can play around with some of the settings to adjust according to your needs:

• The attribute: data-slider-nav-autoplay-interval="6000"
• The style variables: style="--swiffy-slider-animation-duration:8s; --swiffy-slider-animation-timing:linear;"

You can see that in the markup section on the configuration link above.

Pausing the player

Pausing the autoplayer is already possible if you start it your self - I have created an example of that on the examples page. See example on the first slider and buttons below it

The code is also below - it handles 3 things.

• Manually starting and stopping the autoplayer using buttons
• Automatically stopping and starting the autoplayer when the slider is hovered or touched on mobile
• Automatically stopping and starting the autoplayer when the browser tab looses or gains focus

You can of course change this to fit your exact needs - this is just an example to show you the possibilities.

<button onclick="startAutoPlayer()" class="btn btn-success">Start auto play</button> <button onclick="pauseAutoPlayer()" class="btn btn-outline-success">Pause auto play</button>
<button onclick="startAutoPlayer()" class="btn btn-success">Start auto play</button> <button onclick="pauseAutoPlayer()" class="btn btn-outline-success">Pause auto play</button>
<script>
    //Variable for keeping the timer instance that runs the autoplayer
    var autoPlayer;

    //Start playing with the specified interval
    function startAutoPlayer() {
        var timeout = 2500; //ms
        var autopause = false;
        //A .swiffy-slider instance with the id 'swiffy-animation'
        var sliderElement = document.getElementById("swiffy-animation");

        autoPlayer = swiffyslider.autoPlay(sliderElement, timeout, autopause);
        console.log("Player started");

        //Stop the player when mouse is hovered or touch is starting
        ["mouseover", "touchstart"].forEach(function(event) {
            sliderElement.addEventListener(event, function() {
                window.clearTimeout(autoPlayer);
            }, {
                once: true,
                passive: true
            });
        });

        //Re-start the player when mouse is leaving the slider or touch stops
        ["mouseout", "touchend"].forEach(function(event) {
            sliderElement.addEventListener(event, function() {
                startAutoPlayer();
            }, {
                once: true,
                passive: true
            });
        });
    }

    //Stop the autoplaying - by clearing the autoPlayer timer
    function pauseAutoPlayer() {
        window.clearTimeout(autoPlayer);
        console.log("Player stopped");
    }

    //Use the visibility API to stop the player when users switches to other tab or window and start it again when coming back to the window
    document.addEventListener('visibilitychange', function() {
        if (document.visibilityState == "hidden") {
            console.log("Browser tab is hidden - stopping autoplayer");
            pauseAutoPlayer();
        } else {
            console.log("Browser tab is shown again - starting autoplayer");
            startAutoPlayer();
        }
    });
</script>

The new animation needs to be released in 1.5.0 before you can use it - let me know what you like before I bump the version.

The pausing of the autoplayer, you can do already.

[nicped]

One note related to ADA/WCAG - the animation already does not run if the browser is requesting prefers-reduced-motion

[todd-kruger]

Wow, thank you so much for the wonderful support on this! That is exactly what I was looking for, and it seems perfect how you set it up. I will be using this slider for all my projects going forward with the exception of those who want fadein (see below question).

I just realized something, and maybe you can verify this but is it not possible to have slides "fade in" inside of slide in? I thought the animation fadein did it but it just slides in, then fades in. Most sliders offer just to fade in, without sliding in. I am thinking this is because of what you mentioned "vertical scrolling div", that it can't do this? Fading in is often requested by clients as the sliding part is to big of a distraction.

Thank you for the pausing tips. Normally we have it autoplay, and just provide an option to pause. With the prefers-reduced-motion, that may be enough if I tell the client but not sure.

[nicped]

Yes, the fade-in is a limitation because of the base concept on how things work - with the horizontal sliding div (vertical was my bad). What other sliders do is they move around with divs on top of each other - that is what requires a lot of JS and causes relatively bad touch support. I have not found a good solution for this specific issue without too much scripting.

One thing that might work is to disable 'smooth scrolling' with the nodelay option. See it in action here

That will get rid of the sliding because the scroll will happen with no animation. But you still do not get that smooth fade-in from one slide to the next.

I'll bump the version to 1.5 to include the new animation.