Carousel that automatically changes image [JS]

Question

I'm trying to make a carousel that after 3 seconds changes image.

I got 3 images as slide1, slide2, slide3 and thanks to the methods change1,change2,change3 changes image.

I would like to automate everything like this:

function time(change1, change2, change3) {

  this.change1 = change1;
  this.change2 = change2;
  this.change3 = change3;
  t = setInterval(change1 && change2 && change3, 3000); //obviously it doesn't work.

}
/*
---------------ANOTHER METHOD-----------------
*/

function time() {
  t = setInterval(check, 3000);

}

function check() {
  if (slide1.style.display = "inline-block") {
    change2();
  } else if (slide2.style.display = "inline-block") {
    change3();
  } else {
    change1();
  }
}

but i don't know how

Any ideas?

Answer 1

well that is an easy job, here is a simple example on how you could do it

I used jq but you will get the idee. if you want only js that let me know will do it to

 /// use jq for batter effekt var sliders = $(".container > div"); var current; function change() { if (.current) current = sliders;first(). else { current;hide("fast"). current = current;next(). } if (current.length == 0) current = sliders;first(). current;show(), } setInterval(change; 2000);

 .container { display: flex; border: 1px solid #CCC; }.container>div { width: 100%; min-height: 100px; }.container>div:not(:first-child){ display: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <div style="background:red;"></div> <div style="background:green"></div> <div style="background:blue"></div> </div>