How to interrupt the animation of a carousel

Question

I’m having a problem at the carousel using jQuery:

I can’t get him to stop transitioning the images by clicking a button.

Follows the code:

$('#slide img:eq(0)').addClass("ativo").show();
var text = $('.ativo').attr("alt");
$("#slide").prepend("<p>" + text + "</p>");
var t = setInterval(slide, 5000);

$('#stop').hover(function(event) {
    clearInterval(t);
}, function() {
    setInterval(slide, 5000);
});


function slide() {
    if ($('.ativo').next().size()) {
        $('.ativo').fadeOut(2000).removeClass('ativo').next().fadeIn(2000).addClass('ativo');
    } else {
        $('.ativo').fadeOut(2000).removeClass('ativo');
        $('#slide img:eq(0)').fadeIn(2000).addClass('ativo');
    }
    var text = $('.ativo').attr('alt');
    $('#slide p').hide().html(text).delay(500).fadeIn(2000);

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<figure id="slide">
    <img src="img/paisagem.jpg" alt="imagem 1">
    <img src="img/logo.jpg" alt="Imagem 2">
    <img src="img/paisagem.jpg" alt="Imagem 3">
</figure>
<button id='start'>Start</button>
<button id='stop'>Stop</button>

Answer 1

One way to resolve your issue is by calling the stop() and start() function straight from the buttons:

<button id='start' onclick="start()">Start</button>
<button id='stop' onclick="stop()">Stop</button>

Then you can create the functions just below your script:

function stop() {
    clearInterval(t);
}

function start() {
    t = setInterval(slide, 1000);
}

There are other solutions (including using jQuery), but I believe this is the most didactic/easy to understand. Test the code below by clicking "Run".

var t;

$('#slide img:eq(0)').addClass("ativo").show();
var text = $('.ativo').attr("alt");
// $("#slide").prepend("<p>"+ text+"</p>");
// t = setInterval(slide,5000);

function slide() {
    if ($('.ativo').next().size()) {
        $('.ativo').fadeOut(2000).removeClass('ativo').next().fadeIn(2000).addClass('ativo');
    } else {
        $('.ativo').fadeOut(2000).removeClass('ativo');
        $('#slide img:eq(0)').fadeIn(2000).addClass('ativo');
    }
    var text = $('.ativo').attr('alt');
    $('#slide p').hide().html(text).delay(500).fadeIn(2000);

}

function stop() {
    clearInterval(t);
}

function start() {
    t = setInterval(slide, 1000);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<figure id="slide">
    <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/se/se-icon.png?v=93426798a1d4" width="80" alt="Stack Exchange">
    <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a" width="80" alt="Stack Overflow">
    <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/sf/sf-icon.png?v=6c3100d858bb" width="80" alt="Server Fault">
</figure>
<button id='start' onclick="start()">Start</button>
<button id='stop' onclick="stop()">Stop</button>