uikit/src/js/mixin/slider-autoplay.js

UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.

import {$, attr, matches} from 'uikit-util';

export default {

    props: {
        autoplay: Boolean,
        autoplayInterval: Number,
        pauseOnHover: Boolean
    },

    data: {
        autoplay: false,
        autoplayInterval: 7000,
        pauseOnHover: true
    },

    connected() {
        this.autoplay && this.startAutoplay();
    },

    disconnected() {
        this.stopAutoplay();
    },

    update() {
        attr(this.slides, 'tabindex', '-1');
    },

    events: [

        {

            name: 'visibilitychange',

            el() {
                return document;
            },

            filter() {
                return this.autoplay;
            },

            handler() {
                if (document.hidden) {
                    this.stopAutoplay();
                } else {
                    this.startAutoplay();
                }
            }

        }

    ],

    methods: {

        startAutoplay() {

            this.stopAutoplay();

            this.interval = setInterval(
                () => (!this.draggable || !$(':focus', this.$el))
                    && (!this.pauseOnHover || !matches(this.$el, ':hover'))
                    && !this.stack.length
                    && this.show('next'),
                this.autoplayInterval
            );

        },

        stopAutoplay() {
            this.interval && clearInterval(this.interval);
        }

    }

};