Question

I’m working on creating a jquery carousel. This function slides the images to the left and changes their classes according to what position they have been moved to. (after you click a button called “increase”). It works the first time just as it should, removing the left image, changing the middle class to the left, and the right to the middle while adding a new image on the right and giving it the right position class. Here is the fiddle if you want to see it in action: http://jsfiddle.net/6fwbS/25/

The second time the function gets called, everything gets messed up. A new image is appended but it has 0 opacity, and the class is .right_slot. Any idea what I’m doing wrong here? Thanks in advance.

function slide_img_left() {

        var imgs = imgArr.length;
        a++;
        if (a >= imgs) {
            a = 0;
        }

        b = a - 1;
        c = a + 1;

        if (b < 0) {
            b = imgs - 1;
        }
        if (c >= imgs) {
            c = 0;
        }

        var left = $('.left_slot'); var middle = $('.middle_slot'); var right = $('.right_slot');
        var newImg = imgArr[c][0];
        left.animate({
            opacity: 0,
            left: '-=50px'
        }, 300, function() {
            left.remove();
        });


        middle.animate({
            left: '-=50px'
        }, 300, function() {
            middle.attr('class', 'left_slot');
            right.attr('class', 'middle_slot');
        });

        right.animate({
            left: '-=50px'
        }, 300, function(){
            $("#basic_div").append(newImg);
            newImg.attr('class', 'right_slot'); 
        });

        $("#varsDiv").html(" var b = " + b + " var a = " + a + " var c = " + c);

    }

Answer 1

• You should .clone() your images or revert the changes you make to their styles.

  $("#basic_div").append(imgArr[b].clone());
  $("#basic_div").append(imgArr[a].clone());
  $("#basic_div").append(imgArr[c].clone());
  ...
  function slide_img_left() {
    ...
    var newImg = imgArr[c].clone();
    ...
  }
  

• Moving left_slot to the left and hiding it is just screwing your layout. middle_slot gets out of sight.

This is a working example for the increase function with a slightly different fade out effect.