jQuery автоматическое и ручное слайд-шоу

Question

Для веб-страницы требуется слайд-шоу, которое будет запускаться автоматически, но при необходимости вы можете перейти к следующему или предыдущему слайду, нажав кнопку. Я предоставляю свой код. Как добавить автоматическое слайд-шоу и максимально оптимизировать этот вариант кода?

$( document ).ready(function() {

changeSlide('next');

$('#sliderToLeft').on('click', function() {
    changeSlide('previous');
});

$('#sliderToRight').on('click', function() {
    changeSlide('next');
});

function changeSlide(direction) {
    var currentSlide = $('.active');
    var nextSlide = currentSlide.next('.slide');
    var previousSlide = currentSlide.prev();

    if (direction == 'next') {
        if (nextSlide.length) {
            nextSlide.addClass('active');
            nextSlide.children('h1').delay(1000).slideDown(800);
            nextSlide.children('h2').delay(1200).slideDown(800);
            nextSlide.children('h3').delay(1900).slideDown(800);
            nextSlide.children('button').delay(2800).slideDown(800);
        } else {
            $('#slidesArea > .slide').first().addClass('active');
            $('#slidesArea > .slide').first().children('h1').delay(1000).slideDown(800);
            $('#slidesArea > .slide').first().children('h2').delay(1200).slideDown(800);
            $('#slidesArea > .slide').first().children('h3').delay(1900).slideDown(800);
            $('#slidesArea > .slide').first().children('button').delay(2800).slideDown(800);
        }
    } else {
        if (previousSlide.length) {
            previousSlide.addClass('active');
            previousSlide.children('h1').delay(1000).slideDown(800);
            previousSlide.children('h2').delay(1200).slideDown(800);
            previousSlide.children('h3').delay(1900).slideDown(800);
            previousSlide.children('button').delay(2800).slideDown(800);
        } else {
            $('#slidesArea > .slide').last().addClass('active');
            $('#slidesArea > .slide').last().children('h1').delay(1000).slideDown(800);
            $('#slidesArea > .slide').last().children('h2').delay(1200).slideDown(800);
            $('#slidesArea > .slide').last().children('h3').delay(1900).slideDown(800);
            $('#slidesArea > .slide').last().children('button').delay(2800).slideDown(800);
        }
    }

    currentSlide.removeClass('active');
    currentSlide.children('h1').slideUp();
    currentSlide.children('h2').slideUp();
    currentSlide.children('h3').slideUp();
    currentSlide.children('button').slideUp();

}});

Answer 1

попробуй

setInterval(function() { 
 changeSlide('next');
},  3000);

как

$( document ).ready(function() {

setInterval(function() { 
 changeSlide('next');
},  3000);


$('#sliderToLeft').on('click', function() {
    changeSlide('previous');
});

$('#sliderToRight').on('click', function() {
    changeSlide('next');
});

function changeSlide(direction) {
    var currentSlide = $('.active');
    var nextSlide = currentSlide.next('.slide');
    var previousSlide = currentSlide.prev();

    if (direction == 'next') {
        if (nextSlide.length) {
            nextSlide.addClass('active');
            nextSlide.children('h1').delay(1000).slideDown(800);
            nextSlide.children('h2').delay(1200).slideDown(800);
            nextSlide.children('h3').delay(1900).slideDown(800);
            nextSlide.children('button').delay(2800).slideDown(800);
        } else {
            $('#slidesArea > .slide').first().addClass('active');
            $('#slidesArea > .slide').first().children('h1').delay(1000).slideDown(800);
            $('#slidesArea > .slide').first().children('h2').delay(1200).slideDown(800);
            $('#slidesArea > .slide').first().children('h3').delay(1900).slideDown(800);
            $('#slidesArea > .slide').first().children('button').delay(2800).slideDown(800);
        }
    } else {
        if (previousSlide.length) {
            previousSlide.addClass('active');
            previousSlide.children('h1').delay(1000).slideDown(800);
            previousSlide.children('h2').delay(1200).slideDown(800);
            previousSlide.children('h3').delay(1900).slideDown(800);
            previousSlide.children('button').delay(2800).slideDown(800);
        } else {
            $('#slidesArea > .slide').last().addClass('active');
            $('#slidesArea > .slide').last().children('h1').delay(1000).slideDown(800);
            $('#slidesArea > .slide').last().children('h2').delay(1200).slideDown(800);
            $('#slidesArea > .slide').last().children('h3').delay(1900).slideDown(800);
            $('#slidesArea > .slide').last().children('button').delay(2800).slideDown(800);
        }
    }

    currentSlide.removeClass('active');
    currentSlide.children('h1').slideUp();
    currentSlide.children('h2').slideUp();
    currentSlide.children('h3').slideUp();
    currentSlide.children('button').slideUp();

}});