i need to add some text DIV's on each slide of a Nivoslider. I tried different approach but doesn't work as expected ...
The Caption thing didn't help me as i don't want to see a caption on the bottom of the picture .. the texts should be in exact places on each slide.
So far I'm stuck here:
<div id="homeSlider1Container">
<div class="nivoSlider" id="slider">
<img src="/upload/custom_screens/rb/RB-Slide1.gif">
<div class="s1Text1">Our rental experts help you - from the start of your search until you move in.</div>
<img src="/upload/custom_screens/rb/RB-Slide2.gif">
<div class="s2Text1">We have the largest, most up-to-date apartment rental listings.</div>
<img src="/upload/custom_screens/rb/RB-Slide3.gif">
</div> <!--end slider-->
</div><!-- end homeSlider1Container -->
And the script is:
$(window).load(function() {
$('#slider').nivoSlider({
effect: 'fade', // Specify sets like: 'fold,fade,sliceDown'
//slices: 15, // For slice animations
boxCols: 8, // For box animations
boxRows: 4, // For box animations
animSpeed: 500, // Slide transition speed
pauseTime: 3000, // How long each slide will show
startSlide: 0, // Set starting Slide (0 index)
directionNav: true, // Next & Prev navigation
directionNavHide: false, // Only show on hover
controlNav: false, // 1,2,3... navigation
controlNavThumbs: false, // Use thumbnails for Control Nav
controlNavThumbsFromRel: false, // Use image rel for thumbs
controlNavThumbsSearch: '.jpg', // Replace this with...
controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
keyboardNav: true, // Use left & right arrows
pauseOnHover: true, // Stop animation while hovering
manualAdvance: false, // Force manual transitions
captionOpacity: 0.8, // Universal caption opacity
prevText: 'Prev', // Prev directionNav text
nextText: 'Next', // Next directionNav text
randomStart: false, // Start on a random slide
beforeChange: function(){}, // Triggers before a slide transition
afterChange: function(){}, // Triggers after a slide transition
slideshowEnd: function(){}, // Triggers after all slides have been shown
lastSlide: function(){}, // Triggers when last slide is shown
afterLoad: function(){} // Triggers when slider has loaded
});
});
Thank you
You should use the caption functionality that comes with NivoSlider, it's very dynamic. Change the positioning, width, height, and any other properties within the css.
Please see the .nivo-caption
CSS class, which can be styled to appear anywhere/anyhow you want.
i.e.:
background: #000;
color: #FFFFFF;
height: 65px;
padding: 8px;
position: absolute;
right: 38px;
top: 40px;
width: 320px;
z-index: 8;
Please be aware that the absolute positioning of right, top, left, bottom are all relative to your slide dimensions.