CODEWITHSUNDEEP
javascriptjqueryslide
Philip
Philip

Reputation: 319

strange behaviour while sliding images on carousel

I made a jsfiddle so you can reproduce the bug: FIDDLE

I implemented a carousel to display 3 images. There's a current image (the image being displayed) and the other two remain hidden until I click one of the lateral arrows, causing the next image to slide from the side overlaying the (now previous) current image.

I've been 2 hours trying to figure out why there are certain specific 'transitions' in which the animation doesn't seem to work. For example, when clicking the left arrow to pass from the first image to the second and from the second to the third the animation works fine, but when clicking it again, the transition from 3 to 1 doesn't perform the slide animation. When moving in the opposite direction (using the right arrow) only one transition is animated. I think the problem has to do with that if in the click event handler function, but couldn't spot what's causing it. Any help would be greatly appreciated.

TIA

Upvotes: 0

Views: 233

Answers (3)

Harigovind R
Harigovind R

Reputation: 826

there seemed to be a problem with the order of the images also. please try this code out. The code is reuse of the previous image arrow code. Just try it out.

$('.arrowRight').on('click',function(e) {
    var currLandscape = $(this).siblings(".currImg");
    var nextLandscape = currLandscape.nextAll(".hiddenImg").first();

    var currDesc= $(".currDesc");
    var nextDesc= currDesc.nextAll(".hiddenDesc").first();

    if (nextLandscape.length == 0) {
        nextLandscape = currLandscape.siblings('.hiddenImg').first();
    }
    if (nextDesc.length == 0) {
        nextDesc= currDesc.siblings('.hiddenDesc').first();
    }

    nextLandscape.show("slide", { direction: "right" }, 400, function() {
        currLandscape.hide("slide");
    });

    currDesc.fadeOut().removeClass('currDesc').addClass('hiddenDesc');
    nextDesc.fadeIn().removeClass('hiddenDesc').addClass('currDesc');

    currLandscape.removeClass('currImg').addClass('hiddenImg');
    nextLandscape.removeClass('hiddenImg').addClass('currImg');
});

Upvotes: 0

zkcro
zkcro

Reputation: 4344

The underlying issue here is related to the z-order of the three images. Your slide animations are only showing up where the image being slid in is above the displayed image; the "broken" transitions are actually occurring, they're just obscured by the "higher" visible image.

You can fix this by explicitly setting the z-index of the new and current image. For example, on the right transition:

    prevLandscape.zIndex(1);
    currLandscape.zIndex(0);

If you do this, you'll also need to increase the z-index of the arrows so they're above the images.

Fiddle

Upvotes: 2

kavinhuh
kavinhuh

Reputation: 739

jsfiddle The issue is with the hide method you just simply hide it add the slide transition for the hide method. change this line currLandscape.hide(); to currLandscape.hide("slide");

Upvotes: 0

Related Questions