hmongouachon/rgbKineticSlider

Autoplay Event

Opened this issue · 3 comments

How can implement autoplay?

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

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

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