Ninja Slider / Posts /

Caption to display below the photo not inside

4

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

Thanks

Antonio Enrique  8 years ago   viewed: 8907    

10 Answers

2

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

Milo
  7 years ago
1

Please refer to the "Show each slide image caption outside the slider" section in the demo 8 page: http://www.menucool.com/slider/show-image-gallery-on-modal-popup

Milo
  7 years ago
0

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   8 years ago
0

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   8 years ago
0

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   8 years ago
-1

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

Milo   8 years ago
0

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

T.Ganner
  7 years ago
0

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

Milo   7 years ago
0

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   7 years ago
0

Surely I am talking the caption in Ninja Slider.

Milo   7 years ago

   

Your name*
Password
(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:
▲