Connecting a slider to a menu

Question

I have a flexslider that i'm trying to connect to my website. In the website i have a menu of several elements. I want to connect the slider to the first element of the menu. There's a fade in/ out function that will allow the slider to fade in once the first element is clicked. Now i tried several times to connect it, however once i click the first element (aaaaaaa) of my menu, i get nothing. Any help please?

Jsfiddle for the site: https://jsfiddle.net/vL7ojznz/ Jsfiddle for the slider: http://jsfiddle.net/t3sgbq5w/

I have in my site 3 dividers (item11, item22, and item33) : HTML:

        <div id="menu" class="menu">
        <ul class="headlines">
             <li id="item1"><button>aaaaaaaa</button></li>
            <li id="item2"><button>bbbbbbb</button></li>
            <li id="item3"><button>ccccccc        </button></li>
            <li id="item4"><button>dddddddd         </button></li>
            <li id="item5"><button>eeeeeee eee.   </button></li>
            <li id="item6"><button>ffffff       </button></li>
            <li id="item7"><button>ggggggg       </button></li>

        </ul>
        </div>


     <div id="container">
<div id="first" class="inner-container">
   <div id="item11" class="item"> <a name="item11"></a>

                <img id="image1" src="http://placehold.it/350x150" />
                <img id="image2" src="http://placehold.it/350x150" />
                <img id="image3" src="http://placehold.it/350x150" />
                <img id="image4" src="http://placehold.it/350x150" />
                <img id="image5" src="http://placehold.it/350x150" />
                <img id="image6" src="http://placehold.it/350x150" />
                <img id="image7" src="http://placehold.it/350x150" />
                <img id="image8" src="http://placehold.it/350x150" />
                <img id="image9" src="http://placehold.it/350x150" />
                <img id="image10" src="http://placehold.it/350x150" />
            </div>
        </div>
    <div id="second" class="inner-container">
      <div id="item22" class="item"> <a name="item11"></a>

                <img id="image1" src="http://placehold.it/350x150" />
                <img id="image2" src="http://placehold.it/350x150" />
                <img id="image3" src="http://placehold.it/350x150" />
                <img id="image4" src="http://placehold.it/350x150" />
                <img id="image5" src="http://placehold.it/350x150" />
                <img id="image6" src="http://placehold.it/350x150" />
                <img id="image7" src="http://placehold.it/350x150" />
                <img id="image8" src="http://placehold.it/350x150" />
                <img id="image9" src="http://placehold.it/350x150" />
                <img id="image10" src="http://placehold.it/350x150" />
            </div>
        </div>
  <div id="third" class="inner-container">
     <div id="item33" class="item"> <a name="item11"></a>

                <img id="image1" src="http://placehold.it/350x150" />
                <img id="image2" src="http://placehold.it/350x150" />
                <img id="image3" src="http://placehold.it/350x150" />
                <img id="image4" src="http://placehold.it/350x150" />
                <img id="image5" src="http://placehold.it/350x150" />
                <img id="image6" src="http://placehold.it/350x150" />
                <img id="image7" src="http://placehold.it/350x150" />
                <img id="image8" src="http://placehold.it/350x150" />
                <img id="image9" src="http://placehold.it/350x150" />
                <img id="image10" src="http://placehold.it/350x150" />
            </div>
        </div>
        </div>

I want to replace item11 only with the whole slider. Please help, thank you..

Answer 1

I think your main problem is you have to initialize .flexslider after your #container fades in.

Look at this Fiddle.