Как улучшить функциональность этого слайдера jQuery?

Я сделал слайдер изображений.

Три проблемы:

Показывается последний слайд. Однако счетчик показывает первый слайд. Как мне это решить?
Нажимаю play, играет счетчик. Как мне остановить его на последнем слайде?
При последнем нажатии кнопки next и last становятся серыми. Кроме того, при первом нажатии кнопки prev и first становятся серыми. Я использовал CSS. Как мне автоматизировать это с помощью jQuery?

Я пытался:

здесь я попытался добавить класс .active к последнему изображению и использовать CSS, чтобы скрыть другие изображения. К сожалению, счетчик показывает 1/6 вместо 6/6.
Я попытался добавить функцию, которая проверяет, является ли текущий слайд последним. Я не знаю, почему это не работает:

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

var totalImages = $(".images").length; 
        sliderCompleted: function(current) {
        if (slideImage >= totalImages) {

        clearTimeout(slideTimer);

    };

Вероятно, мне придется использовать $('.images:last'), однако мне трудно понять, как это реализовать.

Надеюсь, у кого-то найдется время, чтобы подтолкнуть меня в правильном направлении...

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);

$('.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 = "test_A.svg">
            <figcaption>Test A</figcaption>
        </figure>
        <figure class = "image">
            <img src = "test_B.svg">
            <figcaption>Test B</figcaption>
        </figure>
        <figure class = "image">
            <img src = "test_C.svg">
            <figcaption>Test C</figcaption>
        </figure>
        <figure class = "image">
            <img src = "test_D.svg">
            <figcaption>Test D</figcaption>
        </figure>
        <figure class = "image">
            <img src = "test_E.svg">
            <figcaption>Test E</figcaption>
        </figure>
        <figure class = "image active">
            <img src = "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>

html jquery css

30.04.2024 03:43

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вам просто нужно вызвать slideImage(1); в самом конце JS-кода, чтобы начать работу там, где вы хотите.

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

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

});

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 = "http://www.bookmov.es/book/test_A.svg">
            <figcaption>Test A</figcaption>
        </figure>
        <figure class = "image">
            <img src = "http://www.bookmov.es/book/test_B.svg">
            <figcaption>Test B</figcaption>
        </figure>
        <figure class = "image">
            <img src = "http://www.bookmov.es/book/test_C.svg">
            <figcaption>Test C</figcaption>
        </figure>
        <figure class = "image">
            <img src = "http://www.bookmov.es/book/test_D.svg">
            <figcaption>Test D</figcaption>
        </figure>
        <figure class = "image">
            <img src = "http://www.bookmov.es/book/test_E.svg">
            <figcaption>Test E</figcaption>
        </figure>
        <figure class = "image active">
            <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>
    </div>

30.04.2024 19:36

Другие вопросы по теме

Выбор параметра в зависимости от другого выбранного родительского параметра на той же странице

Нужно ли мне возвращать что-то важное из случаев переключения или этого достаточно, чтобы различать разные PHP?

Ошибка Alpine.js «paginationData не определена» в компоненте Laravel Jetstream

Сброс всплывающего окна JQuery

Почему строка, содержащая персидские/арабские и английские символы, была испорчена в представлении браузера?

Получить содержимое ячейки таблицы для всех выбранных строк

Страницы Primefaces загружаются медленно после увеличения версии jQuery

Настройте поиск по таблице данных, реализовав логику регулярных выражений

Перебирать элементы div внутри элемента div

Изменение состояния флажков с помощью jQuery

Как улучшить функциональность этого слайдера jQuery?

Ответы 1

Другие вопросы по теме

Похожие вопросы