Ninja Slider / Posts /

Caption to display below the photo not inside


Right now, I can only make the caption display INSIDE the photo area with the Ninja slider. Can I make it show BELOW the photo area? Some captions are somewhat long and in the mobile version takes half the screen


Antonio Enrique  one year ago   viewed: 2245    

10 Answers


Please refer to the "Show each slide image caption outside the slider" section in Demo 8

  24 days ago

Please refer to the "Show each slide image caption outside the slider" section in the demo 8 page:

  24 days ago

The captions can display outside the slider if you make the following changes to the stylesheet:

  • Remove: #ninja-slider li { overflow:hidden;}
  • If the transitionType is not "slide", you also need to add:
    #ninja-slider ul { overflow:auto!important;}
  • Then for your absolutely positioned captions or other HTML content, you can optionally force it to display outside the slider area:
    #ninja-slider div.caption { position:absolote; top:auto; bottom:-20%; }

Milo   one year ago

For the demo 1, if it is not in "slide" transitionType, you can:

  • In above steps, change the 2nd step to:  ul { overflow:visible!important;}
  • Remove the max-width:700px:
    #ninja-slider div.slider-inner { max-width:700px; }
  • Add the following to #ninja-slider selector:#ninja-slider{ max-width:700px; overflow:visible!important; } /*Another option is not adding the above overflow:visible!imporntant;, but you need to change the nav button position to: #ninja-slider-prev {left: 0px;} #ninja-slider-next {right: -41px;}*/
  • Do the similar max-width changes for .full-screen if you have the .full-screen styles
  • In the ninja-slider.js script, add the following option to nsOptions:m:false,

Try it out and let me know if it doesn't work.

Milo   one year ago

I get a vertical scrollbar when doing this.  The image displays in the same place but I have to scroll down to see the caption below.

I have set transitionType: "fade". If you hit the "previous" button, you get a horizontal scrollbar too.

Chuck   one year ago

I just added a solution when it is not transitionType: "slide". Please check out the above post.

Milo   one year ago

Is it possible to have captions appear outside the slides in Demo 4?

  25 days ago

Yes. See how it is implemented in Demo 8 (the last paragraph in the demo 8 page has detailed instructions).

Milo   22 days ago

Would be great if it worked, which it does not. So the next question: caption applied to the ns-image or to the thumb?

T.Ganner   19 days ago

Surely I am talking the caption in Ninja Slider.

Milo   18 days 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: