CODEWITHSUNDEEP
jquerycss
Nick
Nick

Reputation: 14293

jquery slider - prevent default event on a slider

I'm working with superslides and i'm trying to add some custom effects on the animations.

I was trying to do so like this:

The reason i decided to do this, was because i need the auto play to work, and this was the only idea i could come up with.

The code i have so far is the following:

var slider;

slider = $('.home-page-banner');

slider.superslides({
  play: 5000
});

slider.on('animating.slides', function(evt) {
  // tried all of the three below
  evt.preventDefault(); 
  evt.stopPropagation();
  return slider.superslides('stop');
  console.log(slider.superslides('next'));
  slider.superslides('animate', slider.superslides('current'));
  return slider.superslides('stop');
});

example on codepen

but unfortunately, it's not working as I'd like to. The slider detects the change, fires the event, changes the slide and only then it stops.

Any help on how to properly achieve this?

thanks

Upvotes: 0

Views: 666

Answers (1)

Nidhin Chandran
Nidhin Chandran

Reputation: 856

preventDefault and stopPropagation will not work. Use custom Next and Previous buttons and write functions on them. Check this pen I forked your pen and modified it to match your needs. Start by clicking next, i used animate to create a simple animation.

Upvotes: 1

Related Questions