Hi guys,

I am complketely new in css, and in HTML programming in common, so I need your help

I have this part:
Code:
<div id="slide" class="box-shadow">		
            <div class="slider">
                <ul class="items">
                    <li><img src="images/slider-1.jpg" alt="" /><div class="banner">1&nbsp;</div></li>
                    <li><img src="images/slider-2.jpg" alt="" /><div class="banner">2&nbsp;</div></li>
                    <li><img src="images/slider-3.jpg" alt="" /><div class="banner">3</div></li>
                </ul>
            </div>	
        </div>
Every 7 seconds picture and text changing to the next one. Here is defined parameters in index.html:
Code:
 <script>
		$(document).ready(function(){				   	
			$('.slider')._TMS({
				show:0,
				pauseOnHover:true,
				prevBu:false,
				nextBu:false,
				playBu:false,
				duration:1000,
				preset:'fade',
				pagination:true,
				pagNums:false,
				slideshow:700,
				numStatus:true,
				banners:'fromRight',
				waitBannerAnimation:false,
				progressBar:false
			})		
		});
	</script>
What I want is - to put delay (lets say 2 seconds) in appearence of text "1", "2", "3", i.e. photo appeared, after 2 seconds appeared text, nextphoto appeared, after 2 second next text appeared.

Here is the "banner" class definition:
Code:
.banner{ z-index:1000 !important; position:absolute; top:356px; color:#fbebc4; right:0px;text-align:right; font-family: 'Condiment', cursive; font-size:24px; line-height:30px; color:#000000; width:700px; margin-right:30px;}
I tried to add 
animation-delay:3; animation-duration:4;
but didn't get any difference...

Can you please suggest how I can do this?

Thanks in advance