如何使用 setInterval 函数更改幻灯片？

Question

This is my JS code so far. Right now I can click on each button on the slider and it will change to the corresponding slide.

$('.slide-nav').on('click', function(e) {
e.preventDefault();
// get current slide
var current = $('.flex--active').data('slide'),
  // get button data-slide
  next = $(this).data('slide');
console.log(current);
$('.slide-nav').removeClass('active');
$(this).addClass('active');

if (current === next) {
  return false;
} else {
  $('.slider__wrapper').find('.flex__container[data-slide=' + next + ']').addClass('flex--preStart');
  $('.flex--active').addClass('animate--end');
  setTimeout(function() {
    $('.flex--preStart').removeClass('animate--start flex--preStart').addClass('flex--active');
    $('.animate--end').addClass('animate--start').removeClass('animate--end flex--active');
   }, 900);
  }
 });

the slider I am working with looks like this one to see the html/css https://codepen.io/mikun/pen/YWgqEX

So in addition to clicking to change slides I would like to scroll to change slides

Answer 1

You can simulate the click function this way:

setInterval(function () {
  $(".slide-nav.active").next().click();
}, 1000);

You need to check if this is the last and try this:

setInterval(function () {
  if ($(".slide-nav.active").next().length > 0)
    $(".slide-nav.active").next().click();
  else
    $(".slide-nav").first().click();
}, 1000);

Demo: https://codepen.io/anon/pen/ZwBVzo