Is there a way of using the following Siema arrangement on next/prev buttons instead?

Question

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.

Alen.Toma · Accepted Answer · 2019-01-20T20:03:14.563

0

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();

edited Jan 20 '19 at 20:03

answered Jan 20 '19 at 15:23

Alen.Toma

4,684
2
14
31

Fantastic thank you so much! It worked. One more question Alen, any way I can add 'dragging' to this condition as well? So that when user drags instead of using next/prev buttons, it also stops the timer. – Teebling Jan 20 '19 at 17:39
if you mean jquary draggable, yes simple do onDrag or onBeforeDrag Bind(wait);. it should work. dont forget to vote up :) – Alen.Toma Jan 20 '19 at 17:54
How do I do that? Could you share the full line of code for me? Thanks :) – Teebling Jan 20 '19 at 18:44
hmm you already have drag. so jq dragabble is not required. Now i have updated my answer it should now wait 6s when the drag event trigger. must be also tested is on mobile' – Alen.Toma Jan 20 '19 at 20:04

Is there a way of using the following Siema arrangement on next/prev buttons instead?

1 Answers1