CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Dee
Dee

Reputation: 331

Stop jQuery button animation on last slide

https://jsfiddle.net/z3q2wtLf/29/light/embedded/result/

In the attached jsfiddle link above .cd-hero has 3 slides that are activated by click. I'm trying to add a stop event to the jQuery only on the third slide ("thank you") so that the user stops on that slide (doesn't slide right or go back to the previous slides). I am new to jQuery any help on how to achieve this is much appreciated!

I have tried applying the below without success:

$('.cd-btn').on('click', function(event) {
      event.preventDefault();
      if($(this).hasClass('.thanks')){
       event.stopPropagation();
      } else {
        var activePosition = $('.cd-hero-slider .selected').index();
        var selectedPosition =  activePosition + 1;
        nextSlide($('.cd-hero-slider'), $(''), selectedPosition);

        updateNavigationMarker(selectedPosition + 1);
      }
  });

Upvotes: 2

Views: 72

Answers (1)

Alex Pearson
Alex Pearson

Reputation: 113

If you take the suggestion to add a class to the thank you button (e.g. thanks), you could start out the initial click event with an if statement that does something other than continue with the animation. Something like:

CODE:

$('.cd-btn').on('click', function(event) {
      event.preventDefault();
      if($(this).hasClass('.thanks')){
       //do something other than animate the slides
      } else {
        var activePosition = $('.cd-hero-slider .selected').index();
        var selectedPosition =  activePosition + 1;
        nextSlide($('.cd-hero-slider'), $(''), selectedPosition);

        updateNavigationMarker(selectedPosition + 1);
      }
  });

Upvotes: 1

Related Questions