How to change slides using setInterval function?

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

Praveen Kumar Purushothaman · Accepted Answer · 2019-01-30 16:42:52Z

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

answered Jan 30, 2019 at 16:42

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Emily McMullin Over a year ago

thank you!!!! perfect!!! Pretty much exactly what I was looking to do but I am going to tweak it somewhat thank you sir!

Emily McMullin Over a year ago

how can I do this with a scroll function?

Praveen Kumar Purushothaman Over a year ago

@EmilyMcMullin You can do it on window.scroll()

Collectives™ on Stack Overflow

How to change slides using setInterval function?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related