Title: Pause button??
Last modified: August 30, 2016
---
# Pause button??
* [beabusio](https://wordpress.org/support/users/beabusio/)
* (@beabusio)
* [10 years, 5 months ago](https://wordpress.org/support/topic/pause-button-3/)
* HI! Very good slider!
But why is there no pause button? How can I add it? 5
stars slider, you’re doing wonderful job there!
* [https://wordpress.org/plugins/crelly-slider/](https://wordpress.org/plugins/crelly-slider/)
Viewing 15 replies - 1 through 15 (of 20 total)
1 [2](https://wordpress.org/support/topic/pause-button-3/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/pause-button-3/page/2/?output_format=md)
* Plugin Author [Fabio Rinaldi](https://wordpress.org/support/users/fabiorino/)
* (@fabiorino)
* [10 years, 5 months ago](https://wordpress.org/support/topic/pause-button-3/#post-6883149)
* I’m sorry, but there’s no way to insert a pause button (except by hard-coding).
The only way to pause the slider is by hovering it
* Thread Starter [beabusio](https://wordpress.org/support/users/beabusio/)
* (@beabusio)
* [10 years, 4 months ago](https://wordpress.org/support/topic/pause-button-3/#post-6883283)
* Hi, fabiorino!
Sorry for long-long delay. How can I hard-code it so it won’t
go anywhere if I will update the slider(as if the plugin will be updated)? I’m
so much happy with this slider, it’s very nice, but this pause button is a must
case for me.
* Plugin Author [Fabio Rinaldi](https://wordpress.org/support/users/fabiorino/)
* (@fabiorino)
* [10 years, 4 months ago](https://wordpress.org/support/topic/pause-button-3/#post-6883287)
* Hi, the plugin will be updated, I’m working on it right now!
* Paste this wherever you want in your page
*
* Thread Starter [beabusio](https://wordpress.org/support/users/beabusio/)
* (@beabusio)
* [10 years, 4 months ago](https://wordpress.org/support/topic/pause-button-3/#post-6883292)
* Thanks, Fabiorino. I tried this button, but when I hit it to pause the slider,
the slider continue to play if I hover a mouse over it and leave. Is it possible
to hardcore it so this will not happen? So when clicked pause the slider will
pause 100% even if I hover it with mouse and leave
* Plugin Author [Fabio Rinaldi](https://wordpress.org/support/users/fabiorino/)
* (@fabiorino)
* [10 years, 4 months ago](https://wordpress.org/support/topic/pause-button-3/#post-6883294)
* If you want, I can send you the new version of Crelly Slider that implements
some API functions (including play/pause). It’s still in development, and some
code may change when I’ll publish the definitive version. At least, for now,
you can work on your project.
* Thread Starter [beabusio](https://wordpress.org/support/users/beabusio/)
* (@beabusio)
* [10 years, 4 months ago](https://wordpress.org/support/topic/pause-button-3/#post-6883311)
* fabiorino, oh so you will implement this feature in next update, this is great!
I can wait for the final version, you are very supportive Fabiorino! Thank you!
🙂
* [invresive](https://wordpress.org/support/users/invresive/)
* (@invresive)
* [10 years, 2 months ago](https://wordpress.org/support/topic/pause-button-3/#post-6883327)
* Hi there, I think I found some bug. Examine this code please:
* ```
var playing = true;
(function($) {
$(document).ready(function() {
$('#pause').click(function() {
$('.crellyslider-slider-myslider').data('crellySlider').pause();
});
$('#resume').click(function() {
$('.crellyslider-slider-myslider').data('crellySlider').resume();
});
$('#left').click(function() {
if(playing) {
$('.crellyslider-slider-myslider').data('crellySlider').previousSlide();
playing = true;
}
else {
$('.crellyslider-slider-myslider').data('crellySlider').previousSlide();
playing = false;
}
});
});
})(jQuery);
```
* What I was trying to achieve: if slider is playing, then the previousSlide works
normally. But if the slider is paused, then the previousSlide shows the previous
slide and then remain paused(it’s not by default). But this didn’t work out.
Instead, this is what happens:
If I push the #pause the slider is stops, but
if I press then the #left button the slider change to previous slide and then
continue and when the time is passed(of the data-time of the slide) then the
whole background turns to transparent.
* I also tried to do this, but it didn’t worked out:
* ```
$('#theleft').click(function() {
if(playing) {
$('.crellyslider-slider-myslider').data('crellySlider').previousSlide();
playing = true;
}
else {
$('.crellyslider-slider-myslider').data('crellySlider').previousSlide();
$('.crellyslider-slider-myslider').data('crellySlider').pause();
playing = false;
}
});
```
* Any idea of how can I achieve the working pause, resume, left and right buttons,
please?
All the rest seems very nice and cool 🙂
* Plugin Author [Fabio Rinaldi](https://wordpress.org/support/users/fabiorino/)
* (@fabiorino)
* [10 years, 2 months ago](https://wordpress.org/support/topic/pause-button-3/#post-6883328)
* Hi, that is not a bug but the normal behaviour.
If you want the slider to stay
paused, you should try something like this:
* ```
$('#theleft').click(function() {
if(playing) {
$('.crellyslider-slider-myslider').data('crellySlider').previousSlide();
playing = true;
}
else {
$('.crellyslider-slider-myslider').data('crellySlider').previousSlide();
setTimeout(function() {
$('.crellyslider-slider-myslider').data('crellySlider').pause();
playing = false;
}, 4000); // your slides ease in + 1000. In this case, 3000+1000
}
});
```
* This will work if all your slides have, more or less, an equal ease in time.
Basically, the slider can’t be paused while the slide animation is being performed.
For that reason I used a setTimeout function to wait about 3000 seconds (I set
3000+1000=4000 to be absolutely sure), the time that the slides take to finish
the animation, before pausing the slider again.
* [invresive](https://wordpress.org/support/users/invresive/)
* (@invresive)
* [10 years, 2 months ago](https://wordpress.org/support/topic/pause-button-3/#post-6883329)
* *Sorry for the mistake. #theleft and #left are the same.
* I don’t know what exactly you mean by “Basically, the slider can’t be paused
while the slide animation is being performed”, because I can pause the slider
in any period of time, simply by pressing first the resume button I made and
then the pause button. It works. Following this logic, I tried also this:
* ```
var playing = true;
(function($) {
$(document).ready(function() {
$('#pause').click(function() {
$('.crellyslider-slider-myslider').data('crellySlider').pause();
});
$('#resume').click(function() {
$('.crellyslider-slider-myslider').data('crellySlider').resume();
});
$('#left').click(function() {
if(playing) {
$('.crellyslider-slider-myslider').data('crellySlider').previousSlide();
playing = true;
}
else {
$('.crellyslider-slider-myslider').data('crellySlider').previousSlide();
$('.crellyslider-slider-myslider').data('crellySlider').resume();
$('.crellyslider-slider-myslider').data('crellySlider').pause();
playing = false;
}
});
});
})(jQuery);
```
* But it didn’t work out. Basically, I want the logic behavior: if the slider paused
and the user pressing left, the slide should change but remain paused.
Also,
I want to start the slider paused, but not sure how to do this. I hope you can
help me with this or make it somehow to work in this order, because I really
liked this slider.
* Moderator [Jan Dembowski](https://wordpress.org/support/users/jdembowski/)
* (@jdembowski)
* Forum Moderator and Brute Squad
* [10 years, 2 months ago](https://wordpress.org/support/topic/pause-button-3/#post-6883330)
* Side note: [@invresive](https://wordpress.org/support/users/invresive/) Your
posts hit the spam queue. They original post is released and the 5 duplicate
and test posts have been deleted.
* [invresive](https://wordpress.org/support/users/invresive/)
* (@invresive)
* [10 years, 2 months ago](https://wordpress.org/support/topic/pause-button-3/#post-6883331)
* Jan Dembowski, I don’t know why, but I couldn’t post. Tried that for some times
and then just registered again. Thanks for taking care about it, hopefully it
won’t happen again
* Plugin Author [Fabio Rinaldi](https://wordpress.org/support/users/fabiorino/)
* (@fabiorino)
* [10 years, 2 months ago](https://wordpress.org/support/topic/pause-button-3/#post-6883332)
* **PREMISE:**
The pause() function can’t be fired right after previousSlide(),
you can use pause() only after the slide in animation is completed. That’s why
this
* ```
$('.crellyslider-slider-myslider').data('crellySlider').previousSlide();
$('.crellyslider-slider-myslider').data('crellySlider').resume();
$('.crellyslider-slider-myslider').data('crellySlider').pause();
```
* or this:
* ```
$('.crellyslider-slider-myslider').data('crellySlider').previousSlide();
$('.crellyslider-slider-myslider').data('crellySlider').pause();
```
* won’t work: you are firing pause() too early. I know that sounds strange, if
you want a more technical explanation, please ask me and/or read about how do
timers work in Javascript.
* **SOLUTION:**
I made a mistake in my previous post: in that piece of code that
I posted before i wrote 4000 milliseconds, but they are way too much. I wanted
to write 400. That’s the corrected code:
* ```
$('#theleft').click(function() {
if(playing) {
$('.crellyslider-slider-myslider').data('crellySlider').previousSlide();
playing = true;
}
else {
$('.crellyslider-slider-myslider').data('crellySlider').previousSlide();
setTimeout(function() {
$('.crellyslider-slider-myslider').data('crellySlider').pause();
playing = false;
}, 400);
}
});
```
* > Basically, I want the logic behavior: if the slider paused and the user pressing
> left, the slide should change but remain paused.
* I understood, please test the code above.
* > Also, I want to start the slider paused, but not sure how to do this.
* In your slider settings you can add some callbacks.
Overwrite beforeStart :
function() {}, with this:
* ```
beforeStart : function() {
setTimeout(function() {
jQuery('.crellyslider-slider-myslider').data('crellySlider').pause();
}, 400);
},
```
* **IMPORTANT:**
I’ve always wrote 400, I’ve calculated it in this way: slides
Ease In + 100. The default ease in of the slides is 300, so 400 = 300 + 100
* [invresive](https://wordpress.org/support/users/invresive/)
* (@invresive)
* [10 years, 2 months ago](https://wordpress.org/support/topic/pause-button-3/#post-6883333)
* Oh… I misunderstood you before.
The code above didn’t work, frankly. But I took
the liberty and change it a bit with a sense of previously stated argument about
the resume-pause buggy thing. And it worked! Just before the pause(), place the
resume() and it will work. Without this, it doesn’t.
* ```
$('.crellyslider-slider-myslider').data('crellySlider').previousSlide();
setTimeout(function() {
$('.crellyslider-slider-myslider').data('crellySlider').resume();
$('.crellyslider-slider-myslider').data('crellySlider').pause();
playing = false;
}, 400);
```
* I don’t know why there’s a need of resume() before the pause in such case, if
you think you know the answer I would be really glad to hear it.
* Also, thanks a lot of the beforeStart function, it did help me to start the slider
in pause mode
HOTDAMN! I LIKE THIS SLIDER! 😀
* P.S. just at this moment, I noticed something… If the slider is paused and I
use the swipe option, the slider come back to resume it self after the slide
is changed. Is there a way to control the swipe function with JS, perhaps? The
same thing is with regular navigation buttons(cs-controls and cs-navigation).
* Plugin Author [Fabio Rinaldi](https://wordpress.org/support/users/fabiorino/)
* (@fabiorino)
* [10 years, 2 months ago](https://wordpress.org/support/topic/pause-button-3/#post-6883334)
* > I don’t know why there’s a need of resume() before the pause in such case,
> if you think you know the answer I would be really glad to hear it.
* Mmhh, strange I don’t know. Anyway, no big deal. If it works, stick with it xD
* > If the slider is paused and I use the swipe option, the slider come back to
> resume it self after the slide is changed. Is there a way to control the swipe
> function with JS, perhaps?
* Try something like this:
* ```
jQuery('.crellyslider-slider').on('swipe', function(event) {
if(! playing) {
setTimeout(function() {
jQuery('.crellyslider-slider-myslider').data('crellySlider').resume();
jQuery('.crellyslider-slider-myslider').data('crellySlider').pause();
playing = false;
}, 1000);
}
});
```
* Notice the higher timeout (1000ms), because swiping is slower than clicking a
button
* [invresive](https://wordpress.org/support/users/invresive/)
* (@invresive)
* [10 years, 2 months ago](https://wordpress.org/support/topic/pause-button-3/#post-6883336)
* Oh man, you’re awesome! that worked just perfectly nice!
How can I target rest
of the buttons? There’s the left and right(cs controls: cs-next and cs-previous)
and there’s the circles(cs-navigation).
Viewing 15 replies - 1 through 15 (of 20 total)
1 [2](https://wordpress.org/support/topic/pause-button-3/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/pause-button-3/page/2/?output_format=md)
The topic ‘Pause button??’ is closed to new replies.
* 
* [Crelly Slider](https://wordpress.org/plugins/crelly-slider/)
* [Support Threads](https://wordpress.org/support/plugin/crelly-slider/)
* [Active Topics](https://wordpress.org/support/plugin/crelly-slider/active/)
* [Unresolved Topics](https://wordpress.org/support/plugin/crelly-slider/unresolved/)
* [Reviews](https://wordpress.org/support/plugin/crelly-slider/reviews/)
* 20 replies
* 4 participants
* Last reply from: [Fabio Rinaldi](https://wordpress.org/support/users/fabiorino/)
* Last activity: [10 years, 1 month ago](https://wordpress.org/support/topic/pause-button-3/page/2/#post-6883341)
* Status: not a support question