How to make images slide continuously when I click and hold arrows on fotorama?

Question

I am now working on a fotorama gallery, and we want to add this new feature that when I click and hold on arrows images will scroll continuously until mouseup.

I tried as following, however the slide movement is not ideal:

    const imgnum = 26;  // 26 images on this page 
    function sleep(milliseconds) {
        var start = new Date().getTime();
        for (var i = 0; i < 1e7; i++) {
            if ((new Date().getTime() - start) > milliseconds){
                break;
            }
        }
    }
    //slide function
    function slideNextFast(){ 
        while(parseInt(fotorama.activeIndex) < imgnum){
            fotorama.show(">");
            sleep(100);
        }
    }
    $(document).ready(function(){
        var timeoutId = 0;
        $(".fotorama__arr--next").on("mousedown", function(){
        timeoutId = setTimeout(slideNextFast, 500);
        }).on("mouseup mouseleave", function(){
        clearTimeout(timeoutId);
        });
    });

HTML is this:

<div id="fotorama" class="fotorama" data-width="700" data-width="700" data-ratio="700/467" data-fit="cover" data-max-width="100%" data-nav="thumbs" data-arrows="always" data-click="false" data-swipe="false" data-auto="false" data-hash="true" data-thumbwidth="110" data-thumbheight="85">
    <div data-thumb="pictures/na1.jpeg">                    
        <div id="map-canvas" data-fit="contain"></div>
    </div>
    <div data-img="mturn/coolidgehwy.jpg" data-caption="One">
        <a href="http://www.google.com/maps/@?api=1&map_action=map&basemap=satellite&zoom=19&center=42.543214,-83.186111" target="_blank" data-fit="contain"></a>
    </div>
    <div data-img="mturn/northwesternhwy.mi.jpg">
        <a href="http://www.google.com/maps/@?api=1&map_action=map&basemap=satellite&zoom=19&center=42.500573,-83.308173" target="_blank" data-fit="contain"></a>
    </div>
    <div data-img="mturn/rt29.universityblvd.md.jpg">
        <a href="http://www.google.com/maps/@?api=1&map_action=map&basemap=satellite&zoom=19&center=39.020215,-77.012860" target="_blank" data-fit="contain"></a>
    </div>

The problem is I do not really know how to improve slideNextFast().