0
<li><a href="/"><img class="ns-img" src="img/3.jpg"></a></li>
For details please read the "Scalable image, lazy load" section in Ninja Slider.
HI
I wish to play product video at my page and add product url inside the video slide
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?
<li>
<div class="video">
<iframe src="https://player.vimeo.com/video/93292237" frameborder="0" allowfullscreen></iframe>
</div>
<a class="ns-img" href="img/2.jpg"></a>
<div class="caption">Supports Youtube, Vimeo and HTML video/audio</div>
<div class="video-playbutton-layer"></div>
</li>
Thanks
<li><a href="/"><img class="ns-img" src="img/3.jpg"></a></li>
For details please read the "Scalable image, lazy load" section in Ninja Slider.
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
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;
}
Do you have a testing page online? That would be much easier for us to investigate.
Thanks!
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;
If your question is related to the Ninja Slider, click:
Ask new question: Ninja SliderOtherwise navigate to one of the following forum categories, and post your question there.
##