Pause/ play button slideshow

[RennaNoëlle]

Hi everyone! 

 

I've been trying to make a slideshow with a pause button. 

But now that I got the slideshow working, the pause button won't.. 

 

Here is my code:

$(function(){

     var $slides    = $(".slide");
     var currentSlide = 0;
     var $pauseBtn = $("#pausebtn");
                
     TweenLite.set($slides.filter(":gt(0)"), {left:"960px"});    
     TweenLite.delayedCall(4, nextSlide);                   
               
          function nextSlide(){                        
          TweenLite.to( $slides.eq(currentSlide), 1, {left:"-960px"} );         
                              
               if (currentSlide < $slides.length - 1) {
                    currentSlide++;
               }
               
               else {
                    currentSlide = 0;
               }
                                                                           
               TweenLite.fromTo( $slides.eq(currentSlide), 1, {left: "960px"}, {left:"0px"} );
               TweenLite.delayedCall(4, nextSlide);                                       
               }

          $pauseBtn.click(function() {
               nextSlide.stop();
          });
                    
});

Can anyone tell me why this won't work? I got the Uncaught TypeError: nextSlide.stop is not a function(…)

 

Thanks in advance!

 

Renna

[Dipscom]

Hi RennaNoëlle,

 

Welcome to the forums!

 

Your error stems from the fact that nextSlide does not have a method called stop().

 

In your code nextSlide is a simple function that does not return any values or creates any methods. The tween is not being assigned to any variables and thus, does not present any route where you can call GSAP's .stop() method.

 

Jonathan's probably going to swing by and give a much deeper explanation of the reasons, I'm just not as eloquent as he is.

 

I can kind of see what you were trying to achieve and it would work if you had set your code up a little different.

 

We usually encourage people to provide a reduced case example of what they're trying to achieve so that we can tinker, see the issues and easily make changes on the code to offer solutions/alternatives.

 

If you feel so inclined, please take a moment to put together an example, we'll be more than happy to tinker and give you suggestions.

 

Here's Carl with a little tutorial on how to quickly put a CodePen together:

 

[RennaNoëlle]

Hi Dipscom, 

 

I made a CodePen of the slideshow: 

See the Pen BQyoPW by RennaNV (@RennaNV) on CodePen

, thanks for the tip!

[Dipscom]

Right, now we're talking.

 

 

Those pens really help us.

 

I'm halfway into something else right now but I will have a look at it in a while and give you some suggestions.

 

Do bear in mind that won't be the only way to achieve a result. 

[Dipscom]

Hi Renna,

 

Since I haven't got a slideshow myself, I only adapted yours to make it work.

 

See the Pen NbPpBO?editors=0010 by dipscom (@dipscom) on CodePen

 

Again, the issue you were having was simply that you were calling a method that did not exist. Based on your setup (there are several ways to build a slideshow), all you had to do was to kill the delayedCall() that you were using to trigger the animation. It was just really one line.

 

Having said that, I did go over your code and made a few changes to have it more flexible and easier to change timings/ speed. Go over the JS and CSS as there are some subtle differences.

 

And I've thrown in a play button as a bonus