Thiết kế website giá rẻ

Question

I’m working with an image slider.

What I am having trouble with:

always start slider at last slide.
click first to show first slide. (Solved)
click last to show last slide. (Solved)
click play to slide all images and stop at last slide.
fade out ‘next’ and ‘last’ button on last slide.
fade out ‘prev’ and ‘first’ button on first slide.

What I have tried:

always start slider at last slide: here I have tried adding class .active to the last image and use css to hide the other images. Unfortunately the counter says 1/6 instead of 6/6.
click play to slide all images and stop at last slide: I have tried adding a function that checks if the current slide is the last slide. I don’t know why this is not working:

function lastSlide() {
        if ($('.image').last().hasClass('active')){
            clearTimeout(slideTimer);
        } else { 
            slideImage(0);
        };
    };

fade out ‘next’ and ‘last’ button on last slide: I don’t know how to add a function that detects if the slider is at the last image, to then add class .nav-off to the ‘next’ & ‘last’ buttons.
fade out ‘prev’ and ‘first’ button on last slide: I don’t know how to add a function that detects if the slider is at the first image, to then add class .nav-off to the ‘next’ & ‘last’ buttons.

Update 01:

Thanks to Christin Babu in his answer, the ‘First’ and ‘Last’ button jump the slider to the first image and the last image.

$('.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();
});

Update 02:

To get this work, is this the correct line of thinking:

collect and count images in slider
manually add HTML class .active to the last image in the slider or detect and display the last image in the slider using jQuery.
update the counter (e.g. 6/6).
grey-out buttons that are not in use (e.g. ‘next’ & ‘last’ when already at last slide. Or ‘prev’ and ‘first’ when already at first slide.)
click play to play from first slide to last slide. No loop.

I’m worried I am using jQuery in a very roundabout way. I am not looking to have code written for me, even a link to an example or other article is already greatly appreciated! Just hope someone has the time to slide me in the right direction here…

Latest HTMl CSS & jQuery:

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

    var slideTimer;

    var slideImage = function(step) {

        if (step == undefined) step = 1;

        clearTimeout(slideTimer);

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

    function lastSlide() {
        if ($('.image').last().hasClass('active')){
            clearTimeout(slideTimer);
        } else { 
            slideImage(0);
        };
    };

    $('.nav-stop').click(function() {
        clearTimeout(slideTimer);
        $(this).hide();
        $('.nav-play').show();
        $('.nav-first').removeClass('nav-off');
        $('.nav-prev').removeClass('nav-off');
        $('.nav-next').removeClass('nav-off');
        $('.nav-last').removeClass('nav-off');
    });

    $('.nav-play').click(function() {
        slideImage(0);
        $(this).hide();
        $('.nav-stop').show();
        $('div.nav-wrap span').removeClass('nav-off');
    });

    $('.nav-prev').click(function() {
        slideImage(-1);
        clearTimeout(slideTimer);
        $('.nav-stop').hide();
        $('.nav-play').show();
        $('div.nav-wrap span').removeClass('nav-off');
    });

    $('.nav-next').click(function() {
        slideImage(1);
        clearTimeout(slideTimer);
        $('.nav-stop').hide();
        $('.nav-play').show();
        $('div.nav-wrap span').removeClass('nav-off');
        
        
    });

    $('.nav-first').click(function() {
       slideImage($('.image:first').index('.image') - $('.image:visible').index('.image'));
        clearTimeout(slideTimer);
        $('.nav-stop').hide();
        $('.nav-play').show();
        $('div.nav-wrap span').removeClass('nav-off');
        $('.nav-first').addClass('nav-off');
        $('.nav-prev').addClass('nav-off');
    });


    $('.nav-last').click(function() {
      slideImage($('.image:last').index('.image') - $('.image:visible').index('.image'));
        clearTimeout(slideTimer);
        $('.nav-stop').hide();
        $('.nav-play').show();
        $('div.nav-wrap span').removeClass('nav-off');
        $('.nav-next').addClass('nav-off');
        $('.nav-last').addClass('nav-off');
    });


    
    // Counter

    var now = 0;

    function updateCounter() {
        var slidesTotal = $('.image').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.active {
    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-stop {
    display: none;
}

div.slider div.nav-wrap span.nav-off {
    cursor: default;
    border: 1px solid silver;
    color: silver;
    background-color: whitesmoke;
    pointer-events: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="slider">
        <figure class="image">
            <img src="https://www.bookmov.es/book/test_A.svg">
            <figcaption>Test A</figcaption>
        </figure>
        <figure class="image">
            <img src="https://www.bookmov.es/book/test_B.svg">
            <figcaption>Test B</figcaption>
        </figure>
        <figure class="image">
            <img src="https://www.bookmov.es/book/test_C.svg">
            <figcaption>Test C</figcaption>
        </figure>
        <figure class="image">
            <img src="https://www.bookmov.es/book/test_D.svg">
            <figcaption>Test D</figcaption>
        </figure>
        <figure class="image">
            <img src="https://www.bookmov.es/book/test_E.svg">
            <figcaption>Test E</figcaption>
        </figure>
        <figure class="image active">
            <img src="https://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>
    </div>

Thiết kế website giá rẻ

Danh mục

jQuery slider how to detect first slide, last slide and update counter?