Как можно автоматически сделать заполнение шкалы timeline?

Question

[Максим js]

Ребят как тут можно сделать переключения автоматом?
https://codepen.io/jenningscreate/pen/rYNqVR

Comments

[Steppp]

Типа слайдер надо сделать?

Answer 1

[Влад]

Как вариант к тому что уже есть в примере

setTimeout(autoplay, 5000);
var num = 0, max = $('.step').length;
function autoplay(){
	$('.step').each(function(id){
		if($(this).hasClass('active')){
			num = parseInt(id)+1;
		}
	});
	if(num >= max){
		num = 0; // Или обнуляем или останавливаем: return false;
	}
	$('.step').removeClass('active');
	$('ul .step').eq(num).trigger('click');
	setTimeout(autoplay, 5000);
}

Comments

[Максим js]

Здравствуйте sgkrim37 , большое вам спасибо! Можете добавить в ваш код чтобы линия заполнялась так же как тут? Спасибо)
https://codepen.io/kowshikkuri/pen/eYYdOvo

[Влад]

Здравствуйте, Максим js, для этого просто в css на 160 строке в предыдущем примере в свойстве transition установите такое же время как и задержка в js, пример в css:
transition:all ease 5s;

В js стоит 5000, что равно 5 сек:

setTimeout(autoplay, 5000);

Сложного нет ничего, только тепер в js где впервые вызывается функция autoplay, ее нужно вытащить из setTimeout

[Максим js]

Влад, Спасибо)

[Максим js]

Влад, подскажите пожалуйста как остановить автоплей при зажатой кнопке мышки по контенту?

let num = 0;
const max = $('.technology-timeline-tab').length;
function autoplay() {
    $('.technology-timeline-tab').each(function (id) {
        if ($(this).hasClass('active')) {
            // eslint-disable-next-line radix
            num = parseInt(id) + 1;
        }
    });
    if (num >= max) {
        num = 0; // Или обнуляем или останавливаем: return false;
    }
    $('.technology-timeline-tab').removeClass('active');
    $('.technology-timeline-tab').eq(num).trigger('click');
    setTimeout(autoplay, 5000);
    const section = $('.technology-timeline-content__section');
    section.on('mousedown', function () { ----------------------------- это условие не работает(
        setTimeout(autoplay, 20000);
    });
}
setTimeout(autoplay, 5000);

[Влад]

Максим js, используйте событие mousedown и mouseup, событие работает только, у вас таймер будет запускаться если зажата клавиша, но когда отпустите вы таймер не остановите.