Ninja Slider / Posts /

How do I get the pause play buttons to show up in the image slider?

I can see the pause/play button when I check the generated HTML code using the Chrome developer console. But how can I get it to show up? Please help.
Shannon  3 years ago   viewed: 4269    

4 Answers


This fix didn't work for me. Suggestions?

  one year ago

The install package does not include a playPause.png image file.  Can we have one, please?

Steve   one year ago

Sure. You can create the playPause.png and use it by adding styles in the stylesheet.

Milo   one year ago

The Pause/Play button will be automatically generated. If you check the slider page with Chrome developer tool, you will find:

<div id="ninja-slider-pause-play"></div>

When the Ninja Slider is paused, it will become:

<div id="ninja-slider-pause-play" class="paused"></div>

If you open the ninja-slider.css file, you can find this line of code:

#ninja-slider-pause-play { display:none;}

So to make the Pause/Play button visible, just modify its style to:

#ninja-slider-pause-play { display:block; width:30px; height:30px; background:#ccc url(playPause.png) no-repeat 50% 0px;} #ninja-slider-pause-play.paused { background-position:50% -40px;}

If you dislike the automatically generated Pause/Play button, you can add it yourself when coding the slider markup. You can add the following markup anywhere in the page:

<div id="ninja-slider-pause-play"></div>

The slider will stop creating the Pause/Play button when it finds the element above is present in the page.

Milo   3 years ago


Your name*
(Optional. Used to modify this post afterwords)
+ =  

Ask your Own Question

  • If your question is related to the topic of this post, you can post your question to this page by clicking the "Post a reply" button at left;

  • When you want to start a new page for your question: