Slider does not work clearInterval function by clicking the button next back to previous photo

Question

var satual =1;
smax=3;
stmp=3000;

// ocultando os tres imagens e exibindo o 1º
function troca(){
    document.getElementById("b1").style.visibility="hidden";
    document.getElementById("b2").style.visibility="hidden";
    document.getElementById("b3").style.visibility="hidden";

    // exibindo imagem atual                    
    document.getElementById("b"+satual).style.visibility="visible";

    satual=satual+1;

    if(satual>smax){
        satual = 1;
    }
}

// funcao de iniciar o slider
function slider(){
    document.getElementById("b1").style.visibility="hidden";
    document.getElementById("b2").style.visibility="hidden";
    document.getElementById("b3").style.visibility="visible";

    // chama uma funcao a cada tempo
     interval=setInterval(troca,stmp);
}





function next(){

    clearInterval(interval);

    satual++;

    if(satual>smax){
        satual = 1;
    }

    document.getElementById("b1").style.visibility="hidden";
    document.getElementById("b2").style.visibility="hidden";
    document.getElementById("b3").style.visibility="hidden";

    // exibindo imagem atual                    
    document.getElementById("b"+satual).style.visibility="visible";



    interval=setInterval(troca,stmp);
}

function anterior(){

    clearInterval(interval);

    satual--;

    if(satual>smax){
        satual = 1;
    }

    if(satual<1){
        satual=3;
    }

    document.getElementById("b1").style.visibility="hidden";
    document.getElementById("b2").style.visibility="hidden";
    document.getElementById("b3").style.visibility="hidden";

    // exibindo imagem atual                    
    document.getElementById("b"+satual).style.visibility="visible";

    interval=setInterval(troca,stmp);
}

Answer 1

You just forgot to declare var intervalglobally.

var satual =1,
smax=3,
stmp=3000,
interval = null;
// ocultando os tres imagens e exibindo o 1º
function troca(){
    document.getElementById("b1").style.visibility="hidden";
    document.getElementById("b2").style.visibility="hidden";
    document.getElementById("b3").style.visibility="hidden";

    // exibindo imagem atual                    
    document.getElementById("b"+satual).style.visibility="visible";

    satual=satual+1;

    if(satual>smax){
        satual = 1;
    }
}

// funcao de iniciar o slider
function slider(){
    document.getElementById("b1").style.visibility="hidden";
    document.getElementById("b2").style.visibility="hidden";
    document.getElementById("b3").style.visibility="visible";

    // chama uma funcao a cada tempo
     interval=setInterval(troca,stmp);
}





function next(){

    clearInterval(interval);

    satual++;

    if(satual>smax){
        satual = 1;
    }

    document.getElementById("b1").style.visibility="hidden";
    document.getElementById("b2").style.visibility="hidden";
    document.getElementById("b3").style.visibility="hidden";

    // exibindo imagem atual                    
    document.getElementById("b"+satual).style.visibility="visible";



    interval=setInterval(troca,stmp);
}

function anterior(){

    clearInterval(interval);

    satual--;

    if(satual>smax){
        satual = 1;
    }

    if(satual<1){
        satual=3;
    }

    document.getElementById("b1").style.visibility="hidden";
    document.getElementById("b2").style.visibility="hidden";
    document.getElementById("b3").style.visibility="hidden";

    // exibindo imagem atual                    
    document.getElementById("b"+satual).style.visibility="visible";

    interval=setInterval(troca,stmp);
}

slider();
//troca();

#d{
position:relative;
float:left;
}
#b1, #b2, #b3{
  position: absolute;
  top:30px;
  left:0;
  width:300px;
  height:250px;
  overflow:hidden;
}

<div id="d">
<div id="b1">
<img src="http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg" />
</div>

<div id="b2">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSNBH9qYupzMRbEK9XFWwHeP9gQyjtMGVoiLGP7eu4PDHqGU2sH" />
</div>

<div id="b3">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRnWaPlh6j_fPgYMtW9Xv-IE0XMLIYC5SfMNfTdR_MJKXDqEMEP" />
</div>
</div>


<button onclick="anterior()"> voltar </button>
<button onclick="next()"> avancar </button>

Answer 2

I changed your code a little to avoid repeating code, but basically what was happening was that in function troca you displayed the slide and then selected the next slide, but in next and anterior you first selected the slide to be displayed and then displayed it.

So what happened was that you displayed slide 3 and marked the next one as 1, but when the user clicked to display the next one, you selected that the next one was 2 (why you increment satual from 1 to 2) and displays it.

Below is a snippet with the code working.

var satual = 3;
var smax = 3;
var stmp = 3000;
var interval;

slider();

// funcao de iniciar o slider
function slider() {
  exibeSlide(satual);
  // chama uma funcao a cada tempo
  interval = setInterval(troca, stmp);
}

function exibeSlide(index) {
  document.getElementById("b1").style.visibility = "hidden";
  document.getElementById("b2").style.visibility = "hidden";
  document.getElementById("b3").style.visibility = "hidden";
  // exibindo imagem com index
  document.getElementById("b" + index).style.visibility = "visible";
}

function troca() {
  satual = satual + 1;
  if (satual > smax) {
    satual = 1;
  }
  exibeSlide(satual);
}

function next() {
  clearInterval(interval);
  satual++;
  if (satual > smax) {
    satual = 1;
  }
  exibeSlide(satual);
  interval = setInterval(troca, stmp);
}

function anterior() {
  clearInterval(interval);
  satual--;
  if (satual < 1) {
    satual = 3;
  }
  exibeSlide(satual);
  interval = setInterval(troca, stmp);
}

<div id="b1"><p>1</p></div>
<div id="b2"><p>2</p></div>
<div id="b3"><p>3</p></div>

<a href="#" onclick="anterior()">Anterior</a>
<a href="#" onclick="next()">Próximo</a>