Javascript Slideshow

[79wjd]

I'm trying to add three separate slideshows to a webpage that should automatically start when the page loads with optional overrides. I want it to automatically start the slideshow and proceed to the next image every 3 seconds and If there is any user interference (pressing the next/prev button) then the timer should reset to 3 seconds.

 

Right now, it works fine except I have two issues. Firstly, it doesn't reset the timer to 3 seconds when a user presses something. I tried adding an increment function that only carousel would use and clearing the carousel timeout everytime plusdivs/currentdiv was called, but that didn't work (it ended up never clearing the timeouts so if you pressed next a lot you would eventually have a slideshow with a near 0s delay as the timeouts would overlap).

 

And secondly, it doesn't work in Internet Explorer, but I'm not sure where the compatibility issue lies (it works fine in Firefox/Chrome).

 

P.s. how would I make it transition so that one image would shift left as the next one shifted in at the same pace (i.e. like this: http://www.jssor.com/demos/html5-ad.slider not like this: http://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_slideshow_animated )

/* NEWS */
    var slideIndex = -1; 
    function carousel() {
        setTimeout(carousel, 2000);
        showDivs(slideIndex+=1);
    }
    function plusDivs(n) { 
          showDivs(slideIndex += n);
    }

    function currentDiv(n) { 
         showDivs(slideIndex = n); 
    }

    function showDivs(n) {
          var i;
          var x = document.getElementsByClassName("mySlides");
          var dots = document.getElementsByClassName("demo");
          if (n > x.length -1) {slideIndex = 0}
          if (n < 0) {slideIndex = x.length}
         for (i = 0; i < x.length; i++) {
                 x[i].style.display = "none";
          }
          for (i = 0; i < dots.length; i++) {
                 dots[i].className = dots[i].className.replace(" currentActive", "");
          }
         x[slideIndex].style.display = "block";
          dots[slideIndex].className += " currentActive";
    }

[Clechay]

You may want to check out swiper. It has everything you need for a slide show + quite good JS api 
http://idangero.us/swiper/demos/#.V2GwJ_mLSUk

[Mr_KoKa]

I don't know how did you try to reset your timer, but this example works:

https://jsfiddle.net/mxL967zb/

In this example you can see that colors of thing will swap every 2.5 seconds, and you can swap it manually by click of a button, which will occur earlier than 2,5 sec, but next swap will occur again after 2.5 since last swap (either it was manual or automatic).

 

When it comes to slides, create view that has hidden overflow and relative position, and everything that will exceed your view won't be visible. Then you can position absolute your slides relatively to your view.

Here is an example how it looks like (also under the hood with overflow visible).

https://jsfiddle.net/huzn9upz/

[79wjd]

19 hours ago, Mr_KoKa said:

I don't know how did you try to reset your timer, but this example works:

https://jsfiddle.net/mxL967zb/

In this example you can see that colors of thing will swap every 2.5 seconds, and you can swap it manually by click of a button, which will occur earlier than 2,5 sec, but next swap will occur again after 2.5 since last swap (either it was manual or automatic).

 

When it comes to slides, create view that has hidden overflow and relative position, and everything that will exceed your view won't be visible. Then you can position absolute your slides relatively to your view.

Here is an example how it looks like (also under the hood with overflow visible).

https://jsfiddle.net/huzn9upz/

I was just clearing the timeout on carousel, I wasn't clearing the timer variable. 

 

and thanks.