Responsive Image Grid

How to insert url link in ninja video slider

I am studying this code but no luck to make it happened. I wish to change the wording from "Supports Youtube, Vimeo and HTML video/audio" to "Buy Now" and go to product url when people click on it. May I know how to get it done?

4 Answers

Thanks for the reply and I have been trying to get this to work since last week but no luck.

My current idea is to use the demo5.html. as template, but the caption need to show below the slide like demo8.html.

I have studied "Show each slide image caption outside the slider" in http://www.menucool.com/slider/show-image-gallery-on-modal-popup. I fail to get the recommended caption css modification to work. Once i change the code, caption gone missing from my demo5.html.

This is the caption style in demo 5' css file:

#ninja-slider .caption {

padding:20px 40px;

margin:auto;

left:0;right:0;

top:auto;bottom:8%;

width:50%;

text-align:center;

font-family:sans-serif;

font-size:2.2em;

color:#fff;

background:rgba(0,0,0,0.6);

border:1px solid rgba(255,255,255,0.4);

border-radius:4px;

position:absolute;

box-sizing:border-box;

opacity:0;

-webkit-transition:opacity 1s ease-in;

transition:opacity 1s ease-in;

}

#ninja-slider li[class*='-s'] .caption {

opacity:1;

}

Can you write me the code that make the caption below the video slider in my demo5.html?

Thanks

engbok11 months ago

0

another 2 days of trying, just can't get it to work. Please check my CSS setup as below:MOD made: 1) Caption: Changed the position to absolute and top:100%

ninja-slider .caption {

padding:20px 40px;

margin:auto;

left:0;right:0;

top:100%;bottom:8%;

width:50%;

text-align:center;

font-family:sans-serif;

font-size:2.2em;

color:#fff;

background:rgba(0,0,0,0.6);

border:1px solid rgba(255,255,255,0.4);

border-radius:4px;

position:absolute;

box-sizing:border-box;

opacity:0;

-webkit-transition:opacity 1s ease-in;

transition:opacity 1s ease-in;

2) Reserves a 100px space under the slider:

#ninja-slider .slider-inner {

max-width:800px;

margin:0 auto;/*center-aligned */

font-size:0px;

position:relative;

box-sizing:border-box;

padding-bottom: 100px!important;

}

#ninja-slider li {

width:100%;

height:100%;

top:0;

left:0;

position: absolute;

font-size:12px;

list-style:none;

margin:0;

padding:0;

opacity:0;

box-sizing:border-box;

margin-bottom: 100px!important;

}

3) And remove the overflow:hidden; settings:

#ninja-slider ul {

/*overflow:visible;*/

position:relative;

list-style:none;

padding:0;

box-sizing:border-box;

}

#ninja-slider li {

Removed over flowed hidden, as shown above.

Please help to check on my pagehttp://mmo.net.my/demo5.html

the caption still fail to display

engbok11 months ago

0

Do you have a testing page online? That would be much easier for us to investigate.

Thanks!

Milo11 months 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;