add a button (toggle) Play / Pause for Slideshow

[Ron]

Hello, i am currently using a v2 of ui kit. i am currently trying to add a pause play button but it seems it not working on my end.

<div id="pause-slide" onclick="toggleSliderPause();"><i class="slide-pause-slide-play fa-solid fa-pause"></i></div>

var sliderEl = document.querySelector('ul.uk-slideshow'),
    sliderPause = document.getElementById('pause-slide');

// slider
function ChangeSliderPauseType(div, value) {
    div.className = value;

    var i = div.querySelector('.slide-pause-slide-play');
    i.classList.remove('fa-pause', 'fa-play');
    i.classList.add('fa-' + value);
}

function toggleSliderPause() {
    if (sliderEl.paused) {
        ChangeSliderPauseType(sliderPause, 'pause');
        sliderEl.play();
    } else {
        ChangeSliderPauseType(sliderPause, 'play');
        sliderEl.pause();
    }
}

[Ron]

Update:

I managed to fixed the issue but after it was clicked it is not playing.

    var sliderEl = UIkit.slideshow($('div#slideshow')),
        sliderPause = document.getElementById('pause-slide');

    // slider pause
    function ChangeSliderPauseType(div, value) {
        div.className = value;

        var i = div.querySelector('.slide-pause-slide-play');
        i.classList.remove('fa-pause', 'fa-play');
        i.classList.add('fa-' + value);
    }

    function toggleSliderPause() {
        if (sliderEl.paused) {
            ChangeSliderPauseType(sliderPause, 'pause');
            sliderEl.start();
        } else {
            ChangeSliderPauseType(sliderPause, 'play');
            sliderEl.stop();
        }
    }

[Ron]

To anyone needed to have a pause play button icon. here are the codes. just finished fixing this.

//pause slider
jQuery(function($) {
    var sliderEl = UIkit.slideshow($('div#slideshow-ui-kit')),
        sliderPause = $('#pause-slide'),
        sliderElPaused = false;

    // Function to change the slider pause/play button icon
    function changeSliderPauseType(value) {
        var i = sliderPause.find('.slide-pause-slide-play');
        i.removeClass('fa-pause fa-play').addClass('fa-' + value);
    }

    // Function to toggle slider pause/play state
    function toggleSliderPause() {
        if (!sliderElPaused) {
            changeSliderPauseType('play');
            sliderEl.stop();
        } else {
            changeSliderPauseType('pause');
            sliderEl.start();
        }
        sliderElPaused = !sliderElPaused;
    }

    // Event listener for pause/play button click
    sliderPause.on('click', function() {
        toggleSliderPause();
    });
});