Add some div's with text over NivoSlider slides

Teodor picture Teodor · Mar 22, 2012 · Viewed 9.4k times · Source

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

Answer

SMacFadyen picture SMacFadyen · Mar 22, 2012

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.