Как сделать текст появляться и исчезать с помощью карусели

Question

Я хочу, чтобы текст появлялся и исчезал, когда изображение скользит. Мне нужен тот же эффект на
другие изображения с другим текстом.
Я хочу, чтобы создать подобный эффект, как в скользящем знамени показано здесь: http://www.creativelive.com/

это мой код до сих пор
Мой HTML:

<div id="carousel" class="container_24"> 
    <div class="grid_24"> 
    <div class="spotlight"> 
     <span class="text">This text should appear and dissappear</span> 
     <a href="#"><img src="images/abstract-q-c-960-390-10.jpg" width="960" height="390"></a> 
    </div> 
    </div> 
    <div class="grid_24"> 
    <div class="spotlight"> 
     <span class="text">This text should appear and dissappear</span> 
     <a href="#"><img src="images/abstract-q-c-960-390-9.jpg" width="960" height="390"></a> 
    </div> 
    </div> 
    <div class="grid_24"> 
    <div class="spotlight"> 
     <span class="text">This text should appear and dissappear</span> 
     <a href="#"> <img src="images/abstract-q-c-960-390-8.jpg" width="960" height="390"></a> 
    </div> 
    </div>   
    <div class="grid_24"> 
    <div class="spotlight"> 
     <span class="text">This text should appear and dissappear</span> 
     <a href="#"> <img src="images/abstract-q-c-960-390-3.jpg" width="960" height="390"></a> 
    </div> 
    </div> 
</div> 

Мой Css

.spotlight a { 
    display:block; 
    width:950px; 
    height:390px; 
    float:left; 

} 
.text { 
    color:red; 
    float:left; 
    position:absolute; 
    margin:100px 10px 0 800px; 
    z-index:50; 
} 

Также я использую caroufredsel plugin.

Answer 1

сделал вы даете контейнер слайдера position: relative; и надписям что-то вроде position absolute; bottom: 10px; right; 0px

позиции абсолютного внутри позиции по отношению элемент будет местом коснуться, который является правильным: 0 и топ: 0 в правой верхней части контейнера. И какую часть вы оживляете?

Что вы точно видите? вы могли бы разместить изображение или URL? или jsFiddle?

это то, что я сделал некоторое время назад:

<figure id="slider"> 
       <ul> 
        <!-- slide 1 --> 
        <li>       
         <div class="inside">caption 1a</div>       
         <div class="outside">caption 1b.</div>      
         <img src="images/slide1.jpg" alt="slide"> 
        </li> 
        <!-- slide 2--> 
        <li>      
         <div class="inside">caption 1b </div>      
         <div class="outside">caption 2b</div> 
         <img src="images/slide2.jpg" alt="slide"> 
        </li> 
       </ul> 
      </figure> 

и ЯШ:

$(document).ready(function() { 
if($("#slider ul").length != 0) { 
    $("#slider ul").carouFredSel({ 
     auto : { 
      duration: 950 
     }, 
     swipe : { onTouch : true, onMouse : false }, 
     scroll  : { 
      fx   : "crossfade" 
     }, 
     items  : { 
      visible  : 1, 
      width  : 950, 
      height  : 503, 
     }, 
    }); 
} 

});

и CSS:

#slider{ 
    overflow: hidden; 
    height: 503px; 
    max-width: 1250px; 
    position: relative; 
} 
#slider img{ 
    z-index: 90; 
} 
#header #slider .inside{ 
    overflow: hidden; 
    font: 18px/28px 'Michroma', Verdana, Arial, Helvetica, sans-serif; 
    position: absolute; 
    top: 152px; 
    right: 0px; 
    color: #fff; 
    text-align: center; 
    padding: 8px; 
    z-index: 99; 
    background: #55432e; 
} 
#slider .outside{ 
    overflow: hidden; 
    font: 13px/18px Verdana, Arial, Helvetica, sans-serif; 
    position: absolute; 
    display:block; 
    bottom: 0px; 
    color: #2f2518; 
    width: 95%; 
    padding: 20px 25px; 
    z-index: 99; 
    background: url(../images/transparant-bg.png); 
} 
#slider ul li{ 
    position: relative; 
    float: left; 
}