Set carousel to automatically scroll

Question

How can this carousel be set to auto mode?

This is the snippet of the code in codepen for a great carousel, but I need to set the carousel to be automatic.

Carousel -> https://codepen.io/suez/pen/gadLre

$(document).ready(function() {

  var curPage = 1;
  var numOfPages = $(".skw-page").length;
  var animTime = 1000;
  var scrolling = false;
  var pgPrefix = ".skw-page-";

  function pagination() {
    scrolling = true;

    $(pgPrefix + curPage).removeClass("inactive").addClass("active");
    $(pgPrefix + (curPage - 1)).addClass("inactive");
    $(pgPrefix + (curPage + 1)).removeClass("active");

    setTimeout(function() {
      scrolling = false;
    }, animTime);
  };

  function navigateUp() {
    if (curPage === 1) return;
    curPage--;
    pagination();
  };

  function navigateDown() {
    if (curPage === numOfPages) return;
    curPage++;
    pagination();
  };

  $(document).on("mousewheel DOMMouseScroll", function(e) {
    if (scrolling) return;
    if (e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) {
      navigateUp();
    } else { 
      navigateDown();
    }
  });

  $(document).on("keydown", function(e) {
    if (scrolling) return;
    if (e.which === 38) {
      navigateUp();
    } else if (e.which === 40) {
      navigateDown();
    }
  });
  
  
function trigger(element,type){
    var event;
    if (document.createEvent) {
        event = document.createEvent("HTMLEvents");
        event.initEvent(type, true, true);
      } else {
        event = document.createEventObject();
        event.eventType = type;
      }
      event.eventName = type;
      if (document.createEvent) {
        element.dispatchEvent(event);
      } else {
        element.fireEvent("on" + event.eventType, event);
      }
}


});

This is the animation script in Javascript with keydown scrolling.

Answer 1

You can use the setInterval method which will call the function passed to it after the number of milliseconds specified has elapsed.

var direction = 'forward';

setInterval(() => {
  if (curPage === numOfPages) direction = 'reverse';
  if (curPage === 1) direction = 'forward';
    
  return direction === 'forward' ? navigateDown() : navigateUp();
}, 3000); // 3000 is in milliseconds