SlidesJS - "slide to" breaks code
<p>I have a slider that behaves normally till someone plays the Youtube video - then it stops till the video finishes. Once the video is done it forwards to the next slide. </p>

<p>However. Once it forwards to the next slide, the animation stops completely and 
the prev/next buttons break. Does anyone have a fix?? </p>

<p><a href="http://adinamurch.com/vidtest.html" rel="nofollow">http://adinamurch.com/vidtest.html</a> </p>

<p>The fix posted in the SlidesJS Google group didn't do anything for me.</p>

<p>Thanks</p>

<p>Edit: Here's the HTML code for the slider (auto generated by Wordpress theme):</p>

<pre><code>&lt;div class="sText" id="textSlider"&gt; 
    &lt;div class="slide"&gt;
        &lt;div class="slide-image"&gt;&lt;img src="http://daatsolutions.info/ditto/wp-content/uploads/2012/02/slide-vid1.png" /&gt;&lt;/div&gt;
        &lt;div class="slide-text-right "&gt;
            &lt;div class="slide-title"&gt;&lt;a href="http://daatsolutions.info/ditto/2012/01/test-2/"&gt; Test &lt;/a&gt;&lt;/div&gt;
            &lt;div id="videoDiv"&gt;Loading...&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="clear"&gt;&lt;/div&gt;
    &lt;/div&gt;&lt;!--/ .slide  --&gt;     
    &lt;div class="slide"&gt;
        &lt;div class="slide-image"&gt;&lt;img src="http://daatsolutions.info/ditto/wp-content/uploads/2011/12/frame_1.jpg" /&gt;&lt;/div&gt;
        &lt;div class="slide-text-right "&gt;
            &lt;div class="slide-title"&gt;&lt;a href="http://daatsolutions.info/ditto/2011/12/for-lifes-assets/"&gt; For Life&amp;#8217;s Assets &lt;/a&gt;&lt;/div&gt;
            &lt;div class="slide-descr"&gt;&lt;p&gt;&lt;img src="http://daatsolutions.info/ditto/wp-content/uploads/2011/12/assets-text.png" alt="" title="assets-text" width="204" height="77" class="alignnone size-full wp-image-261" /&gt;&lt;/p&gt;&lt;/div&gt;
            &lt;div class="clear"&gt;&lt;/div&gt;
        &lt;/div&gt;&lt;!--/ .slide-text  --&gt;
        &lt;div class="clear"&gt;&lt;/div&gt;
    &lt;/div&gt;&lt;!--/ .slide  --&gt;
    &lt;div class="slide"&gt;
        &lt;div class="slide-image"&gt;&lt;img src="http://daatsolutions.info/ditto/wp-content/uploads/2011/12/frame_2.jpg" /&gt;&lt;/div&gt;
        &lt;div class="slide-text-right "&gt;
            &lt;div class="slide-title"&gt;&lt;a href="http://daatsolutions.info/ditto/2011/12/second-test/"&gt; Store things that matter &lt;/a&gt;&lt;/div&gt;
            &lt;div class="slide-descr"&gt;&lt;p&gt;&lt;img src="http://daatsolutions.info/ditto/wp-content/uploads/2011/12/store-text.png" alt="" title="store-text" width="236" height="63" class="alignnone size-full wp-image-259" /&gt;&lt;/p&gt;&lt;/div&gt;
            &lt;div class="clear"&gt;&lt;/div&gt;
        &lt;/div&gt;&lt;!--/ .slide-text  --&gt;
        &lt;div class="clear"&gt;&lt;/div&gt;
    &lt;/div&gt;&lt;!--/ .slide  --&gt;
&lt;/div&gt;&lt;!--/ .sText  --&gt;
</code></pre>

<p>I'm using the default Youtube Javascript API, with changes to this function:</p>

<pre><code>// This function is called when the player changes state
      function onPlayerStateChange(newState) {
        //updateHTML("playerState", newState);
        var slidestat = $("#textSlider").slides("status","state");
        var slidenum = $("#textSlider").slides("status","current");
        //alert(slidestat);
        if(slidenum&gt;1) {
            $('#textSlider').slides("play");
        } else {
            $('#textSlider').slides("stop");
        }
        if(newState == 1) { //playing (3 is buffering)
            $('#textSlider').slides("stop");
            $("#textSlider").slides("slide",1); //compensates for slidesjs bug that goes 1 slide before stopping
        } if(newState == -1) { //unstarted
            $('#textSlider').slides("pause");
        } if((newState == 2) || (newState == 0)) { //paused or finished
            $('#textSlider').slides("play");
            $("#textSlider").slides("slide",2);
        } else {
            //$('#textSlider').slides("stop");
        }
      }
</code></pre>
