Слайдер jQuery, как определить первый слайд, последний слайд и счетчик обновлений? ⇐ CSS

[Гость]

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


С чем у меня проблемы:

• всегда запускайте слайдер в последнюю очередь слайд.
• нажмите первым, чтобы показать первый слайд. (Решено)
• нажмите последний, чтобы отобразить последний слайд. (Решено)
• нажмите «Воспроизвести», чтобы прокрутить все изображения, и остановитесь на последнем слайде.
• исчезновение кнопок «Далее» и «Последний» на последнем слайде.
• исчезновение кнопок «Предыдущий» и «Первый» на первом слайде.
  
  Что я пробовал:
• всегда запускайте слайдер в последнюю очередь слайд: здесь я попытался добавить класс .active к последнему изображению и использовать CSS, чтобы скрыть другие изображения. К сожалению, счетчик показывает 1/6 вместо 6/6.
• нажмите «Воспроизвести», чтобы прокрутить все изображения, и остановите< /strong> на последнем слайде: я попробовал добавить функцию, которая проверяет, является ли текущий слайд последним. Я не знаю, почему это не работает:

Код: Выделить всё

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

• исчезновение кнопок «Далее» и «Последний» на последнем слайде: Я не знаю Я не знаю, как добавить функцию, которая определяет, находится ли ползунок на последнем изображении, чтобы затем добавить класс .nav-off к кнопкам «следующее» и «последнее».
• исчезновение кнопок «Предыдущая» и «Первая» на последнем слайде: Я не знаю, как добавить функция, которая определяет, находится ли ползунок на первом изображении, а затем добавляет класс .nav-off к кнопкам «следующий» и «последний».

Обновление 01:
Спасибо Кристину Бабу за его ответ, ' Кнопки «Первое» и «Последнее» перемещают ползунок к первому и последнему изображению.

Код: Выделить всё

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

Обновление 02:
Чтобы добиться этой работы, правильный ли это ход мыслей:

• собирать и подсчитывать изображения в слайдере
• вручную добавлять HTML-класс .active к последнему изображению в слайдере или обнаружить и отобразить последнее изображение в слайдере с помощью jQuery.
• обновить счетчик (например, 6/6).
• серый Кнопки вывода, которые не используются (например, «Следующий» и «Последний», если уже на последнем слайде. Или «Предыдущий» и «Первый», если уже на первом слайде.)
• нажмите play, чтобы воспроизвести от первого до последнего слайда. Нет цикла.

Меня беспокоит, что я использую jQuery очень окольным путем. Я не хочу, чтобы код был написан за меня, даже ссылка на пример или другую статью уже будет очень признательна! Просто надеюсь, что у кого-то найдется время подтолкнуть меня в правильном направлении...
Последние версии 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;
}

Код: Выделить всё

[img]http://www.bookmov.es/book/test_A.svg[/img]
Test A


[img]http://www.bookmov.es/book/test_B.svg[/img]
Test B


[img]http://www.bookmov.es/book/test_C.svg[/img]
Test C


[img]http://www.bookmov.es/book/test_D.svg[/img]
Test D


[img]http://www.bookmov.es/book/test_E.svg[/img]
Test E


[img]http://www.bookmov.es/book/test_F.svg[/img]
Test F


stop
play
first
prev
next
last

Подробнее здесь: https://stackoverflow.com/questions/784 ... te-counter