Brtdku

I am using the lovely and simple Siema script to make a simple carousel. It automatically moves to the next slide every 4 seconds, and also allows me to add previous/next buttons so the user can manually change slides.

Here is the codepen: https://codepen.io/anon/pen/ebqodx

HTML:

<div class="siema">

  <div><img src="https://pawelgrzybek.com/siema/assets/siema--pink.svg" alt="Siema image" /></div>

  <div><img src="https://pawelgrzybek.com/siema/assets/siema--yellow.svg" alt="Siema image" /></div>

  <div><img src="https://pawelgrzybek.com/siema/assets/siema--pink.svg" alt="Siema image" /></div>

  <div><img src="https://pawelgrzybek.com/siema/assets/siema--yellow.svg" alt="Siema image" /></div>

</div>



<button class="prev">Prev</button>

<button class="next">Next</button>

JS:

// perPage accepts two kind of data as a value



// Number:

// fixed amount of slider for all resolutions



// example:

// const mySiema = new Siema({

//   perPage: 2,

// });





// Object

// more complex configuration allows you to specify

// number of slides dependable of browsers viewport

// example below show single slide on small viewpoer

// 2 slider on scrrens wider than 768px

// 3 slider on scrrens wider than 1024px



// example:

// const mySiema = new Siema({

//   perPage: {

//     768: 2,

//     1024: 3,

//   },

// });

const mySiema = new Siema({

  perPage: 2,

  loop: true,

});

const prev = document.querySelector('.prev');

const next = document.querySelector('.next');



prev.addEventListener('click', () => mySiema.prev());

next.addEventListener('click', () => mySiema.next());



setInterval(() => mySiema.next(), 4000)

However, when I click a previous/next button (to see a specific 'slide') the autoplay continues and quickly takes me away from the slide I wanted to view.

So what I am trying to achieve is this: I want the autoplay to stop for 60 seconds when the user uses the previous/next buttons, so that they have some time to read the slide they want. After the 60 seconds I want the autoplay to continue as before.

Is there any way I can do this?

I have already tried using setInterval and a few other ideas but can't seem to get it working. I see this guy has been able to achieve what I want: https://codepen.io/anon/pen/aPexBe

But the problem is that he uses and generates pagination for his slides, which I don't want. I want the autoplay to stop when the user uses next/prev buttons, not pagination buttons. I don't need that.

This is the updated version with validation for the mouse drag.

const mySiema = new Siema({

  perPage: 2,

  loop: true,

});

var wait = 6000; // 6 secounds in ms, increase it as you like.

const prev = document.querySelector('.prev');

const next = document.querySelector('.next');



prev.addEventListener('click', () => { Bind(wait); mySiema.prev();});

next.addEventListener('click', () => { Bind(wait); mySiema.next();});



    var interval;

    var timeout;

    var mouseDown = false;

    function Bind(secound){

      clearInterval(interval);

      clearTimeout(timeout)

      if (secound){

       timeout= setTimeout(function(){

          interval= setInterval(() => mySiema.next(), 4000)

        }, secound)

      }else interval= setInterval(() => mySiema.next(), 4000)

    }



    $('.siema').mousedown(function(event) {

    mouseDown = true;

    }).mouseup(function(){

     var mouseDown = false;

    }).mousemove(function(e){

       if (mouseDown)

         Bind(wait);

    });



    Bind();