Multi direction slider
<p>I have set up a slider so that each time the next button is clicked the image will slide in from a different direction. e.g;
 First click slide from top
Second from left
third from top
forth from left e.t.c e.t.c.</p>

<p>So far I have the first three working correctly but after the fourth click the images slide in only from the side.</p>

<p>Here is what i have so far </p>

<pre><code>&lt;script type="text/javascript"&gt;
        var totalslides = '6';
        var slidenum = 0;
        var slidenext = 0;
        var slideType = '';
        $(function(){
            $('#gallery-next').data('counter',1);
            $('#gallery-next').click(function() {
               slidenum = parseInt($('#gallery-next').data('counter'));
               slidenext = slidenum+1
               slideType = $('#'+slidenum+'-slide').attr('class')
               slideType = slideType.split('-')[0]

               if (slideType =='') slideType='up';
               else slideType = 'right';
                //alert('Next slideType is: ' + slideType)
                //hide(slide) is a jQueryUI function, so ensure you include that lib
               $('#'+slidenext+'-slide').delay(605).show('slide',{direction:slideType}, 1000);
               $('#'+slidenum+'-slide').fadeOut(600);

               $('#'+slidenext+'-text').delay(731).fadeIn(1000);
               $('#'+slidenum+'-text').fadeOut(600);

               slidenum = slidenum % totalslides + 1;
               $('#gallery-next').data('counter',slidenum);

               console.log(slideType);
            });
        });
    &lt;/script&gt;

&lt;div id="slider"&gt;

            &lt;section class="horizontal-gallery"&gt;
                &lt;img src="images/waikanae/crafar_h1.jpg" class="" id="1-slide"/&gt;
                &lt;p id="1-text" class="horizontal-gallery-text"&gt;This is the first image in the gallery &lt;/p&gt;
            &lt;/section&gt;

            &lt;section class="vertical-gallery"&gt;
                &lt;img src="images/waikanae/crafar_v1.jpg" class="picture2 init-hidden" id="2-slide"/&gt;
                &lt;p id="2-text" class="vertical-gallery-text init-hidden"&gt;This is the second image in the gallery, it should be sliding down&lt;/p&gt;
            &lt;/section&gt;

            &lt;section class="horizontal-gallery"&gt;
                &lt;img src="images/waikanae/crafar_h1.jpg" class="picture3 init-hidden" id="3-slide"/&gt;
                &lt;p id="3-text" class="horizontal-gallery-text text-3 init-hidden"&gt;This is the third image in the gallery it should be sliding in from the side &lt;/p&gt;
            &lt;/section&gt;

            &lt;section class="vertical-gallery"&gt;
                &lt;img src="images/waikanae/crafar_v1.jpg" class="picture4 init-hidden" id="4-slide"/&gt;
                &lt;p id="4-text" class="vertical-gallery-text text-4 init-hidden"&gt;This is the fourth image in the gallery, it should be sliding down &lt;/p&gt;
            &lt;/section&gt;
</code></pre>

<p><a href="http://luvly.co.nz/space/test/waikanae-beach-house.html" rel="nofollow">http://luvly.co.nz/space/test/waikanae-beach-house.html</a></p>

<p>If somebody could figure out why it isn't working properly it would be much appreciated!
Cheers</p>
