Affichage coulissant Jquery construit autour du déplacement d'une pile verticale d'images

Question

Comment faire défiler une pile d'images, horizontalement, à travers un espace aligné verticalement? Imaginez une mise en page comme ceci:

J'ai une zone visible, par exemple une div, avec une taille fixe (50px large par 300px de hauteur) et trop-plein sans pareil pour cacher quoi que ce soit en dehors de celui-ci ...

Ce div a trois images empilées verticalement affichées à l'intérieur ...

Au clic d'un bouton, je veux déplacer ces trois images vers la gauche tout en déplaçant dans un autre ensemble de trois images de la droite.

Comment faites-vous ça? Dois-je créer une liste non ordonnée pour chaque ensemble de trois images, puis déplacer ces UL en utilisant javascript? Cela semble rendre la mise en page difficile. Comment aborderiez-vous cela?

Answer 1

1. Créez une liste non ordonnée et remplissez-la avec des éléments de liste (un pour chaque ensemble de trois images).
2. Ligne les éléments de liste vers le haut l'un à côté de l'autre en ligne.
3. Avoir un div avec des dimensions spécifiques assis dessus avec débordement: aucun dans le CSS pour masquer les autres éléments de la liste.
4. Utilisez JavaScript pour décaler l'ensemble visible d'un côté tout en affichant le suivant. En utilisant jquery, vous pouvez passer aux sélecteurs last et first: li: first. Déplacez-les en utilisant la largeur de l'élément de liste.

Voici une fonction de décalage:

var Shift = function(direction){ 
    var dir = direction; 
    var item_width = $('#carousel_ul li').outerWidth(); 
    var indent = parseInt($('#carousel_ul').css('left'), 10); 
    var left_indent; 

    if(dir === 'after'){ 
     left_indent = indent - item_width; 
    } else if (dir === 'before'){ 
     left_indent = indent + item_width; 
    }else{ 
     return; // first list item will display but nothing moves 
    } 

    //make the sliding effect using jquery's animate function 
    //prevent already animated elements from responding 
    $('#carousel_ul:not(:animated)').animate({ 
     'left' : left_indent 
    },500,function(){ 

     if(dir === 'after'){ 
      $('#carousel_ul li:last').after($('#carousel_ul li:first')); 
     } else if (dir === 'before'){ 
      $('#carousel_ul li:first').before($('#carousel_ul li:last')); 
     } else { 
      return; // first list item will display but nothing moves 
     } 

     $('#carousel_ul').css({ 
      'left' : '-120px' 
     }); 
    }); 

};