Ninja Slider / Posts /

Caption to display below the photo not inside

1

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  one year ago   viewed: 2118    

4 Answers

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   one year 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   one year 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   one year ago
0

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

Milo   one year 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: