Erstellen Sie einen jQuery Slider mit onclick slide Funktionalität

Question

Hier ist a link! zu dem Schieberegler, den ich erstellt habe.

/* Create an array to hold the different image positions */ 
var itemPositions = []; 
var numberOfItems = $('#scroller .item').length; 

/* Assign each array element a CSS class based on its initial position */ 
function assignPositions() { 
    for (var i = 0; i < numberOfItems; i++) { 
     if (i === 0) { 
      itemPositions[i] = 'left-hidden'; 
     } else if (i === 1) { 
      itemPositions[i] = 'left'; 
     } else if (i === 2) { 
      itemPositions[i] = 'middle'; 
     } else if (i === 3) { 
      itemPositions[i] = 'right'; 
     } else { 
      itemPositions[i] = 'right-hidden'; 
     } 
    } 
    /* Add each class to the corresponding element */ 
    $('#scroller .item').each(function(index) { 
     $(this).addClass(itemPositions[index]); 
    }); 
} 

/* To scroll, we shift the array values by one place and reapply the classes to the images */ 
function scroll(direction) { 
    if (direction === 'prev') { 
     itemPositions.push(itemPositions.shift()); 
    } else if (direction === 'next') { 
     itemPositions.unshift(itemPositions.pop()); 
    } 
    $('#scroller .item').removeClass('left-hidden left middle right right-hidden').each(function(index) { 
     $(this).addClass(itemPositions[index]); 
    });   
} 

/* Do all this when the DOMs ready */ 
$(document).ready(function() { 

    assignPositions(); 



    /* Click behaviours */ 
    $('.left').click(function() { 
     scroll('prev'); 
    }); 
    $('.right').click(function() { 
     scroll('next'); 
    }); 
}); 

Das, was ich passieren soll, ist, wenn der Benutzer klickt auf der linken oder rechten Bild, ich möchte, dass Bild in Zentrum (oder Mitte) kommen. Im aktuellen Szenario klicken Sie auf Ereignis nur einmal. Kann jemand helfen?

Answer 1

Das Problem ist die Verwendung von click Funktion, die nur das Ereignis auf dem aktuellen Selektor und nicht auf die zukünftigen Änderungen, die Sie vorgenommen werden, binden wird.

Sie müssen delegate Funktion anstelle von click Funktion verwenden.

ist hier eine korrigierte und codepen Arbeits: http://codepen.io/adrenalinedj/pen/JXazmy

Und hier ist der korrigierte Teil:

$(document).ready(function() { 

    assignPositions(); 

    /* Click behaviours */ 
    $('#scroller').delegate(".left", "click", function() { 
     scroll('prev'); 
    }); 
    $('#scroller').delegate(".right", "click", function() { 
     scroll('next'); 
    }); 
});