hmongouachon / rgbKineticSlider

A fully customizable webgl slider based on PixiJs and Gsap
348 stars 40 forks source link

Autoplay Event #13

Open OkanDemirkaya opened 1 year ago

OkanDemirkaya commented 1 year ago

How can implement autoplay?

OkanDemirkaya commented 1 year ago

You can add script to page for playing autoplay. Also you can change 'waitingDuration' variable.

You can look at page How to Implement JavaScript Auto-Repeat Functionality

jQuery(document).ready(function( $ ){
    // kinetic slider autoplay
    var waitingDuration = 1000;  // waiting for  1 second
    var counter = 0;
    var clickNextBtn = window.setInterval(function(){
        var nextBtn = document.querySelectorAll(".slider-controls span")[1];
        // when page load, waiting for 'waitingDuration'
        if(counter == 0){
            counter += 1;
        }
        else{
            nextBtn.click();
        }
        }, waitingDuration);
});
OkanDemirkaya commented 1 year ago

If you want to finish autoplay when all sliders are shown.

You can use this function:

jQuery(document).ready(function( $ ){
    // kinetic slider autoplay
    var waitingDuration = 2500;  // waiting for  2second
    var counter = 0;
    var maxSlider = 4;  // number of sliders
    var clickNextBtn = window.setInterval(function(){
        var nextBtn = document.querySelectorAll(".slider-controls span")[1];
        // when page load, waiting for 'waitingDuration'
        if(counter == 0){
            counter += 1;
        }
        else{
            nextBtn.click();
            counter += 1;
            if(counter == (maxSlider)){
                clearInterval(clickNextBtn);    
            }
        }
        }, waitingDuration);
});
nedzen commented 1 year ago

If anyone needs it here's the vanilla js

document.addEventListener('DOMContentLoaded', function() {
  // kinetic slider autoplay
  var waitingDuration = 1000; // waiting for 1 second
  var counter = 0;
  var clickNextBtn = window.setInterval(function() {
    var nextBtn = document.querySelectorAll('.slider-controls span')[1];
    // when page load, waiting for 'waitingDuration'
    if (counter == 0) {
      counter += 1;
    } else {
      nextBtn.click();
    }
  }, waitingDuration);
});