Есть ли способ использовать следующую компоновку Siema вместо кнопок next / prev? - PullRequest
Новая
       23

Есть ли способ использовать следующую компоновку Siema вместо кнопок next / prev?

0 голосов
/ 20 января 2019

Я использую прекрасный и простой скрипт Siema для создания простой карусели. Он автоматически перемещается к следующему слайду каждые 4 секунды, а также позволяет добавлять кнопки «предыдущий / следующий», чтобы пользователь мог вручную менять слайды.

Вот кодовая ручка: 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)

Однако, когда я нажимаю предыдущую / следующую кнопку (чтобы увидеть конкретный «слайд»), автопроигрывание продолжается и быстро забирает меня со слайда, который я хотел просмотреть.

Итак, я пытаюсь добиться этого: я хочу, чтобы автозапуск остановился на 60 секунд, когда пользователь использует кнопки «предыдущий / следующий», чтобы у него было время прочитать желаемый слайд. Через 60 секунд я хочу, чтобы автовоспроизведение продолжалось, как и раньше.

Есть ли способ, которым я могу это сделать?

Я уже пытался использовать setInterval и несколько других идей, но не могу заставить его работать. Я вижу, что этот парень смог достичь того, чего я хочу: https://codepen.io/anon/pen/aPexBe

Но проблема в том, что он использует и генерирует нумерацию страниц для своих слайдов, чего я не хочу. Я хочу, чтобы автовоспроизведение прекращалось, когда пользователь использует кнопки «Следующая / Предыдущая», а не кнопки пагинации. Мне это не нужно.

1 Ответ

0 голосов
/ 20 января 2019

Это обновленная версия с проверкой для перетаскивания мышью. 

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