如何改进此滑块的导航（跳转到第一个、最后一个和停止循环）？

Question

我正在使用图像滑块。

成功实施：

1. 自动播放
2. 停止/启动按钮
3. 下一张幻灯片
4. 上一张幻灯片
5. 滑动计数器

我遇到的问题：

1. 单击“第一张”显示第一张幻灯片
2. 单击“最后一张”显示最后一张幻灯片
3. 在最后一张幻灯片处自动停止滑块

我尝试过的：

1. 我已经尝试过

   lastIndexOf();

   和

   array.lastIndexOf(item, start)

   和

   findLastIndex()

   但是我不明白如何在我当前的jQuery中正确构建这些。我总是弄坏滑块。

2. 我尝试停止滑块形式循环，因为我相信滑块将停在最后一张幻灯片上。我尝试删除

   if (step != 0)

   但也没有运气。

请有人滑动我朝正确的方向吗？

代码：

$(document).ready(function() {
    
    // Slider

    var slideTimer;
    var slider = function(step) {
        if (step == undefined) step = 1;
        clearTimeout(slideTimer);
        var look = $('.images:visible').index('.images');
        if (step != 0) {
            $('.images').stop();
            $('.images:visible').hide();
        }
        look = look + step;
        if (look >= $('.images').length) {
            look = 0;
        } else if (look < 0) {
            look = $('.images').length - 1;
        }
        if (step != 0) {
            $('.images:eq(' + look + ')').stop().show();
        }
        if ($('.slider').length > 0) {
            slideTimer = setTimeout(slider, 2000);
        }
        now = look;
        updateCounter();
    };
    slider(0);

    $('.nav-stop').click(function() {
        clearTimeout(slideTimer);
        $(this).hide();
        $('.nav-play').show();
    });

    $('.nav-play').click(function() {
        slider(0);
        $(this).hide();
        $('.nav-stop').show();
    });

    $('.nav-prev').click(function() {
        slider(-1);
        clearTimeout(slideTimer);
        $('.nav-stop').hide();
        $('.nav-play').show();
    });

    $('.nav-next').click(function() {
        slider(1);
        clearTimeout(slideTimer);
        $('.nav-stop').hide();
        $('.nav-play').show();
    });

    $('.nav-first').click(function() {
        slider(0);
        clearTimeout(slideTimer);
        $('.nav-stop').hide();
        $('.nav-play').show();
    });

    $('.nav-last').click(function() {
        slider(0);
        clearTimeout(slideTimer);
        $('.nav-stop').hide();
        $('.nav-play').show();
    });

    
    // Counter

    var now = 0;

    function updateCounter() {
        var slidesTotal = $('.images').length;
        $('.counter').text(now + 1 + '/' + slidesTotal);
    }
    updateCounter();

});

div.slider {
    position: relative;
    float: left;
    padding: 10px;
    border: 1px solid black;
    outline: none;
    margin: 0;
    box-sizing: border-box;
}

div.slider figure {
    position: relative;
    display: none;
    width: 300px;
    padding: 10px;
    border: 1px solid black;
    outline: none;
    margin: 0 0 10px 0;
    box-sizing: border-box;
}

div.slider figure.first {
    display: block;
}

div.slider figure img {
    position: relative;
    width: 100%;
    padding: 10px;
    border: 1px solid black;
    outline: none;
    margin: 0 0 10px 0;
    box-sizing: border-box;
}

div.slider figcaption {
    position: relative;
    padding: 10px;
    border: 1px solid black;
    outline: none;
    margin: 0;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 20px;
}

div.slider div.nav-wrap {
    position: relative;
    display: inline-block;
    width: 300px;
    padding: 10px;
    border: 1px solid black;
    outline: none;
    margin: 0;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 20px;
}

div.slider div.nav-wrap span {
    position: relative;
    float: left;
    width: 20%;
    height: 40px;
    padding: 10px;
    border: 1px solid black;
    outline: none;
    margin: 0;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 20px;
    text-align: center;
    color: black;
    background-color: white;
}

div.slider div.nav-wrap span:hover:not(.counter) {
    cursor: pointer;
    border: 1px solid silver;
    color: silver;
    background-color: whitesmoke;
}

div.slider div.nav-wrap span.counter {
    width: 100%;
    margin: 10px 0 0 0;
}

div.slider div.nav-wrap span.nav-play {
    display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="slider">
        <figure class="images first">
            <img src="http://www.bookmov.es/book/test_A.svg">
            <figcaption>Test A</figcaption>
        </figure>
        <figure class="images">
            <img src="http://www.bookmov.es/book/test_B.svg">
            <figcaption>Test B</figcaption>
        </figure>
        <figure class="images">
            <img src="http://www.bookmov.es/book/test_C.svg">
            <figcaption>Test C</figcaption>
        </figure>
        <figure class="images">
            <img src="http://www.bookmov.es/book/test_D.svg">
            <figcaption>Test D</figcaption>
        </figure>
        <figure class="images">
            <img src="http://www.bookmov.es/book/test_E.svg">
            <figcaption>Test E</figcaption>
        </figure>
        <figure class="images">
            <img src="http://www.bookmov.es/book/test_F.svg">
            <figcaption>Test F</figcaption>
        </figure>
        <div class="nav-wrap">
            <span class="nav-stop">stop</span>
            <span class="nav-play">play</span>
            <span class="nav-first">first</span>
            <span class="nav-prev">prev</span>
            <span class="nav-next">next</span>
            <span class="nav-last">last</span>
            <span class="counter"></span>
        </div>

Answer 1

$('.nav-first').click(function() {
    slider($('.images:first').index('.images') - $('.images:visible').index('.images'));
    clearTimeout(slideTimer);
    $('.nav-stop').hide();
    $('.nav-play').show();
});


$('.nav-last').click(function() {
    slider($('.images:last').index('.images') - $('.images:visible').index('.images'));
    clearTimeout(slideTimer);
    $('.nav-stop').hide();
    $('.nav-play').show();
});

let slider = function(step) {
    if (step == undefined) step = 1;
    clearTimeout(slideTimer);
    let look = $('.images:visible').index('.images');
    if (step != 0) {
        $('.images').stop();
        $('.images:visible').hide();
    }
    look = look + step;
    if (look >= $('.images').length) {
        look = 0;
        if (step > 0) {
            clearTimeout(slideTimer);
            $('.nav-stop').hide();
            $('.nav-play').show();
            updateCounter();
            return;
        }
    } else if (look < 0) {
        look = $('.images').length - 1;
    }
    $('.images:eq(' + look + ')').stop().show();
    if ($('.slider').length > 0 && step != 0) {
        slideTimer = setTimeout(slider, 2000);
    }
    now = look;
    updateCounter();
};