Javascript slider autoplay

1.5k Views Asked by At

I'm quite a newbie and still learning and i can't quite solve a problem. I have this code below and i want to add autoplay functionality to the slider. Will appreciate the help very much.

$('.feature-selection').click(function () {
        if (!$(this).hasClass('active-feature')) {
            var featureID = '#' + $(this).attr('data-feature-id');
            $('.active-feature').removeClass('active-feature');
            $(this).addClass('active-feature');
            $('.active-feature-detail').addClass('fadeOutLeftBig');
            setTimeout(function () {
                $('.fadeOutLeftBig').removeClass('active-feature-detail');
            }, 500);
            setTimeout(function () {
                $('.fadeOutLeftBig').removeClass('fadeOutLeftBig');
            }, 600);
            $(featureID).addClass('fadeInRightBig');
            var that = featureID;
            setTimeout(function () {
                $(that).removeClass('fadeInRightBig');
            }, 1000);
            $(featureID).addClass('active-feature-detail');
            var newFeatureHeight = $(featureID).height() + 88;

            $('#feature-detail-holder').css('min-height', newFeatureHeight);
        }
    });
1

There are 1 best solutions below

2
On
var interval = null;
$('#autoplay-button').click(function(){
    interval = setInterval(function(){
        $('.feature-selection').trigger('click');
    }, 10000);
});

$('#stop-autoplay-button').click(function(){
    clearInterval(interval);
});

$('.feature-selection').click(function () {
    if (!$(this).hasClass('active-feature')) {
        var featureID = '#' + $(this).attr('data-feature-id');
        $('.active-feature').removeClass('active-feature');
        $(this).addClass('active-feature');
        $('.active-feature-detail').addClass('fadeOutLeftBig');
        setTimeout(function () {
            $('.fadeOutLeftBig').removeClass('active-feature-detail');
        }, 500);
        setTimeout(function () {
            $('.fadeOutLeftBig').removeClass('fadeOutLeftBig');
        }, 600);
        $(featureID).addClass('fadeInRightBig');
        var that = featureID;
        setTimeout(function () {
            $(that).removeClass('fadeInRightBig');
        }, 1000);
        $(featureID).addClass('active-feature-detail');
        var newFeatureHeight = $(featureID).height() + 88;

        $('#feature-detail-holder').css('min-height', newFeatureHeight);
    }
});