javascript - Add / show different divs' content according to a defined timing -

good morning everybody.

i built grid wordpress template should work way:

1. fade in div#1's content, show time, fade out content;
2. fade in div#2's content (a slider), start slider, show slides, when finishes loop fade out content;
3. fade in div#3's content, show time, fade out content;
4. fade in div#4's content, show time, fade out content;
5. start loop again step 1.

i managed achieve result can see here, it's difficult match correct timing each fade in / fade out, and slider's behaviour isn't need.

here html structure:

<div class="entry-content"> <section id="home_first_box" class="sec_double first">     <span>some content</span> </section> <section class="sec_single"></section> <section id="home_box_3" class="sec_single last">     <img> </section> <section id="home_box_4" class="sec_single first">     <img> </section> <section class="sec_single"></section> <section class="sec_single"></section> <section id="home_box_7" class="sec_single last">     <img> </section> <section class="sec_single first bottom slider">     <div class="flexslider">         <ul class="slides">                                                                       <li>                     <img>                 </li>                 <li>                     <img>                 </li>                 <li>                     <img>                 </li>                 <li>                     <img>                 </li>                                        </ul>     </div>                                 </section> <section class="sec_single bottom"></section> <section id="home_second_box" class="sec_double last bottom">     <span>some other content</span> </section></div> 

and here (awful) javascript / jquery code i'm using:

function startslider() { $('.flexslider').flexslider( {     animationloop: true,     controlnav: false,     slideshowspeed: 1000,     animationspeed: 500,     after: function(slider)  {         if ( slider.currentslide == (slider.count - 1) <? // slides count starts 0 ?> )  {         slider.pause();         settimeout(function (){slider.play()},5000);         }     } }); }   function homelooper() {     $('#home_box_3 img').fadein(500).delay(500).fadeout(500,startslider);     $('.flexslider').delay(1500).fadein(500).delay(4500).fadeout(500);     $('#home_box_4 img').delay(6000).fadein(500).delay(500).fadeout(500);     $('#home_box_7 img').delay(7000).fadein(500).delay(500).fadeout(500,homelooper); } 

i don't include css code because isn' relevant, think.

i'm looking different approach problem, 1 difficult manage , has no flexibility @ all.

could address me better way achieve need? don't need working code (really appreciated anyway, want have fun myself!), tip find better way.

thanks in advance, have nice day.