Jquery, Sequence.js. Plugin does not start, no visible errors, losing my damn mind
<p>this should be working.. but its not. Is no one able to see the error either?</p>

<p>The following HTML:</p>

<pre><code>&lt;div id="sequence"&gt;
    &lt;ul&gt;
        &lt;li class="animate-in"&gt;
            &lt;div class="frame f1"&gt;
                &lt;a href="/projects/3"&gt;
                    &lt;img src="../../assets/projects/02.jpg"/&gt;
                &lt;/a&gt;
                    &lt;div class="project_info"&gt;
                        &lt;h1&gt;Landscape Design &amp; Build&lt;/h1&gt;
                        &lt;h2&gt;Private Villa - Muharraq&lt;/h2&gt;
                    &lt;/div&gt;
            &lt;/div&gt;
        &lt;/li&gt;
        &lt;li&gt;
            &lt;div class="frame f2"&gt;
                &lt;a href="/projects/2"&gt;
                    &lt;img src="../../assets/projects/03.jpg"/&gt;
                &lt;/a&gt;
                    &lt;div class="project_info"&gt;
                        &lt;h1&gt;Landscape Design &lt;/h1&gt;
                        &lt;h2&gt;Private Villa - Saar&lt;/h2&gt;
                    &lt;/div&gt;
            &lt;/div&gt;
        &lt;/li&gt;
        &lt;li&gt;
            &lt;div class="frame f3"&gt;
                &lt;a href="/projects/1"&gt;
                    &lt;img src="../../assets/projects/01.jpg"/&gt;
                &lt;/a&gt;
                    &lt;div class="project_info"&gt;
                        &lt;h1&gt;Landscape Design &amp; Build&lt;/h1&gt;
                        &lt;h2&gt;Private Villa - Riffa&lt;/h2&gt;
                    &lt;/div&gt;
            &lt;/div&gt;
        &lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<p>Is generated from the following PHP Template:</p>

<pre><code>&lt;div id="sequence"&gt;
    &lt;ul&gt;
        &lt;?php
            $count = 1;
            foreach ($projects as $project) { ?&gt;
                &lt;li&lt;?php if ($count == 1) { ?&gt; class="animate-in"&lt;?php } ?&gt;&gt;
                    &lt;div class="frame f&lt;?php echo $count; ?&gt;"&gt;
                        &lt;a href="/projects/&lt;?php echo $project['id']; ?&gt;"&gt;
                            &lt;img src="../../assets/projects/&lt;?php echo $project['image']; ?&gt;" /&gt;
                        &lt;/a&gt;
                        &lt;div class="project_info"&gt;
                            &lt;h1&gt;&lt;?php echo $project['type']; ?&gt;&lt;/h1&gt;
                            &lt;h2&gt;&lt;?php echo $project['name']; ?&gt;&lt;/h2&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/li&gt;
                &lt;?php $count++;
            }
        ?&gt;
    &lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<p>with the following CSS:</p>

<pre><code>#sequence {
    /*visibility: hidden;*/
    position: relative; /* required */
    width: 830px;
    height: 320px;
    margin: 10px auto;
    overflow: hidden;
}

    #sequence &gt; ul li &gt; * {
        position: absolute; /* required */
    }

    #sequence &gt; ul &gt; li {
        position: absolute; /* required */
        width: 100%; /* required */
        height: 100%;
        z-index: 1; /* required */
    }

    #sequence .frame {
        background: #CCCCCC;
    }

    #sequence .f1 {
        left: -1000px;
        -webkit-transition-duration: 1s;
        -moz-transition-duration: 1s;
        -o-transition-duration: 1s;
        -ms-transition-duration: 1s;
        transition-duration: 1s;
    }
</code></pre>

<p>And I'm initiating sequence like this:</p>

<pre><code>$(document).ready(function() {
    // slider
    var options = {
        autoPlay: true,
        autoPlayDelay: 3000
    };
    $("#sequence").sequence(options).data("sequence");
});
</code></pre>

<p>For the life of me I can't see the error. Only thing I can think of is that I'm inserting the javascript at the end of the page, not in the head tag.. but that has never been an issue before.</p>

<p>I don't see the error...</p>

<p><strong>EDIT:</strong> SOLVED. Check answer below.</p>
