CODEWITHSUNDEEP
javascriptjqueryjquery-uislider
Spade
Spade

Reputation: 117

JavaScript Slider Effect Not Consistant

I have created a slider so that when you click a button a section of content will appear from the side, the next click the section will come from the top and so on so on, however the first few slides are not consistant and all slide the same way (The side).

If someone could have a look and find out why this is happening it would be great: 

<div id="slider">

    <section class="horizontal-gallery">
        <img src="images/pekapeka/peka1.jpg" class="init-hidden" id="1-slide" rel="right"/>
        <p id="1-text" class="horizontal-gallery-text">This is the first image in the gallery </p>
    </section>

    <section class="vertical-gallery">
        <img src="images/pekapeka/peka2.jpg" class="picture2 init-hidden" id="2-slide" rel="right" />
        <p id="2-text" class="vertical-gallery-text init-hidden">This is the second image in the gallery, it should be sliding down</p>
    </section>

    <section class="horizontal-gallery">
        <img src="images/pekapeka/peka3.jpg" class="picture3 init-hidden" id="3-slide" rel="up" />
        <p id="3-text" class="horizontal-gallery-text text-3 init-hidden">This is the third image in the gallery it should be sliding in from the side </p>
    </section>

JS:

var totalslides = '5';
var slidenum = 0;
var slidenext = 0;
var slideType = '';
$(function(){
    $('#gallery-next').data('counter', 0);
    $('#gallery-next').click(function() {
       slidenum = parseInt($('#gallery-next').data('counter'));
       slidenext = slidenum+1

      slideType = $('#'+slidenum+'-slide').attr('rel')

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

       $('#'+slidenext+'-text').delay(1200).fadeIn();
       $('#'+slidenum+'-text').fadeOut(400);

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

       console.log(slideType);
    });
});

And a link: http://luvly.co.nz/space/te-horo-beach-house.html

Upvotes: 0

Views: 189

Answers (2)

Samuel Liew
Samuel Liew

Reputation: 79022

I took the liberty of fixing the entire script, reproduced here: http://jsfiddle.net/samliew/waTDr/31/

var totalslides = 6;
var slidenum = 0;
var slidenext = 0;

$(function () {
    var $slider = $('#slider');
    var $slides = $slider.find('img');
    var $slideTexts = $slider.find('p');

    // hide all except first slide
    $slides.hide().eq(0).show();
    $slideTexts.hide().eq(0).show();

    $('#gallery-next').data('counter', 0);
    $('#gallery-next').click(function () {

        slidenext = slidenum + 1;
        if(slidenext >= totalslides) slidenext = 0;

        var slideType = $slides.eq(slidenext).attr('rel');
        console.log(slidenum + ', ' + slidenext + ': ' + slideType);

        // hide(slide) is a jQueryUI function, so ensure you include that lib
        $slides.eq(slidenext).show('slide', {
            direction: slideType
        }, 1000);
        $slides.eq(slidenum).delay(600).fadeOut(600);

        $slideTexts.eq(slidenext).delay(1200).fadeIn();
        $slideTexts.eq(slidenum).fadeOut(400);

        slidenum++;
        if(slidenum >= totalslides) slidenum = 0;

        console.log(slidenum + ', ' + slidenext);
    });
});

Also, there is something wrong with the CSS positioning of text-6, you might want to look into that.

Upvotes: 1

Brad
Brad

Reputation: 6332

its broken because the first time the thing executes, slidenum is 0. so when it trys to find 

              slideType = $('#'+slidenum+'-slide').attr('rel')

slideType is undefined because $('#0-slide') doesn't exist. so when you try to pass {direction:undefined} to your show() function, i'm assuming its defaulting to some direction you don't expect.

try initializing your slideNum variable to 1.

Upvotes: 1

Related Questions