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  10 years ago   viewed: 9779    

4 Answers


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

Steve   8 years ago

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

Milo   8 years ago

This fix didn't work for me. Suggestions?

  8 years 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   10 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: