Stopping the animation of a carousel

Question

Stopping the animation of a carousel

Navigation

#1 by (0 votes)

2

I have a problem with cars using jQuery:

I can not get it to stop transitioning images at the click of a button.

Follow 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><figureid="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>

javascript jquery

asked by anonymous 16.06.2017 / 00:59

1 answer

Bcrypt in java and php does not match How can I simplify access to the values of interest of a Javascript JSON?

score 0 · Answer 1

One way to solve your question is to call the stop () and start () functions directly 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><figureid="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>