How to set autoplay on a div content slider jquery

Question

I am not big on Jquery and have a situation here;

How can I make an autoplay in this sliding caroussel?

The carousel works adding a "current" class to a li that shows on top, while the non "current" li's are hidden;

The original script I took from here.

Follow the code

function slide() {
  var li = $("ul#latest-news-slider li.active");

  if (li.next().length > 0) {
    li.removeClass("active", 3000, "easeInBack");
    li.next().addClass("active", 3000, "easeInBack");
  } else if (li.prev().length > 0) {
    li.removeClass("active", 3000, "easeInBack");
    $("ul#latest-news-slider li")
      .first("li")
      .addClass("active", 3000, "easeInBack");
  } else {
    return;
  }
}

$(".next").click(function() {
  var li = $("ul#latest-news-slider li.active");

  if (li.next().length > 0) {
    li.removeClass("active", 100, "easeInBack");
    li.next().addClass("active", 100, "easeInBack");
  } else {
    li.removeClass("active", 100, "easeInBack");
    $("ul#latest-news-slider li")
      .first("li")
      .addClass("active", 100, "easeInBack");
  }
});

$(".prev").click(function() {
  var li = $("ul#latest-news-slider li.active");

  if (li.prev().length > 0 && li.prev().is("li")) {
    li.removeClass("active", 100, "easeInBack");
    li.prev().addClass("active", 100, "easeInBack");
  } else {
  }
});

Thanks a lot

Answer 1

I really appreciate your effort, but i'm not qualified to get it;

It can be applyable on here? (codepen link)

function slide(){

            var li=$('ul#latest-news-slider li.active');

            if(li.next().length>0 )
            {
                li.removeClass('active', 3000, "easeInBack");
                li.next().addClass('active', 3000, "easeInBack");

            }else if(li.prev().length>0){
               li.removeClass('active', 3000, "easeInBack");
               $('ul#latest-news-slider li').first('li').addClass('active', 3000, "easeInBack");
            }else
            {
                return;
            }
        }

        $('.next').click(function(){

            var li=$('ul#latest-news-slider li.active');

            if(li.next().length>0 )
            {
                li.removeClass('active', 100, "easeInBack");
                li.next().addClass('active', 100, "easeInBack");

            }else {
               li.removeClass('active', 100, "easeInBack");
               $('ul#latest-news-slider li').first('li').addClass('active', 100, "easeInBack");
            }
        });

        $('.prev').click(function(){

            var li=$('ul#latest-news-slider li.active');

            if(li.prev().length>0 && li.prev().is("li"))
            {
                li.removeClass('active', 100, "easeInBack");
                li.prev().addClass('active', 100, "easeInBack");

            }else {

            }
        });

Answer 2

Not sure how you are implementing this exactly but you could use a setInterval.

var interval;

$("#start").on("click", function(){
  StartThis(1000);
});

$("#stop").on("click", function(){
  StopThis(1000);
});

// speed in miliseconds (1s)
function StartThis(speed){
  interval = setInterval(function(){ 
             Next();
  }, speed);
}

// stop the movement
function StopThis(){
  clearInterval(interval);
}

function Next (){
  console.log("do the next funciton");
/*
  var li=$('ul#latest-news-slider li.active');

            if(li.next().length>0 )
            {
                li.removeClass('active', 100, "easeInBack");
                li.next().addClass('active', 100, "easeInBack");

            }else {
               li.removeClass('active', 100, "easeInBack");
               $('ul#latest-news-slider li').first('li').addClass('active', 100, "easeInBack");
            }
            */
}

StartThis(1000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="start">START</button>
<button id="stop">STOP</button>