bootstrap 5轮播播放暂停按钮功能

问题描述 投票:0回答:1
javascript jquery button carousel bootstrap-5
1个回答
0
投票

这是脚本的修订版本:

$(document).ready(function () {
    var myCarousel = $('#customSlider');
    var carousel = new bootstrap.Carousel(myCarousel[0], {
        interval: 2500,
        ride: 'carousel'
    });

    // Start the carousel on load
    carousel.cycle();

    $('#playBtn').click(function () {
        var isPlaying = $(this).data('cplay');

        if (isPlaying) {
            // If the carousel is playing, pause it
            carousel.pause();
            $(this).data('cplay', false);
            $(this).removeClass("play").addClass("stop");
            $(this).find(".playPauseText").text("Play");
        } else {
            // If the carousel is paused, start it
            carousel.cycle();
            $(this).data('cplay', true);
            $(this).removeClass("stop").addClass("play");
            $(this).find(".playPauseText").text("Pause");
        }
    });
});
© www.soinside.com 2019 - 2024. All rights reserved.