Galerie de balayage réactif

Question

Je travaille sur un extrait pour une galerie de balayage pour mobile. Vous pouvez voir ici http://codepen.io/piatra/full/Edtlq

[].forEach.call(slides, function(s){ 
    s.style.width = mainContainer.offsetWidth + 'px'; 
}); 

Mon problème: Parce que le contenu est composé de plusieurs panneaux dont ils ont besoin d'être sur la même ligne à droite. La taille d'un panneau doit être de 100% de l'écran afin que vous ne voyiez qu'un panneau à la fois. Mais je ne peux pas définir la taille du panneau dans css à 100% parce que cela pousserait chaque panneau sur sa propre rangée.

Actuellement, je résous ce problème dans JS, ontouchstart Je reçois la taille du parent principal et règle chaque diapositive à cette largeur, mais je n'aime pas cette solution parce que lorsque vous passez du paysage au portrait, vous devez toucher la galerie pour pour mettre à jour, et même si j'ajoute un gestionnaire d'événements au changement, ce n'est toujours pas une jolie solution. Puis-je obtenir cet effet uniquement en CSS? Une galerie de panneaux sur la même ligne avec la variable de largeur basée sur le parent?

PS: outils de dev Chrome> Emuler événements tactiles

pps: noté une version simplifiée http://codepen.io/piatra/pen/usaHo Toute amélioration de cette version est très bien accueillie :)

Un bel exemple est http://csscience.com/responsiveslidercss3/ mais lors de l'ajout un nouveau panneau que vous devez éditer le CSS

Answer 1

Je pense que cela ne peut pas être fait avec css pur, d'autant plus que vous voulez qu'il soit facilement maintenable sans avoir besoin de changer css lors de l'ajout de plus de volets.

Une solution serait d'utiliser jquery pour compter les vitres, puis régler la largeur de wrappe et vitres largeur en conséquence pour obtenir l'effet désiré:

http://jsbin.com/idufaj/6/edit

Vous pouvez ajouter autant de fenêtres que vous le souhaitez, et l'effet sera toujours présent.

$(document).ready(function() { 

var panes = $(".pane").length; 
var width = panes * 100 + "%"; 
var panewidth = 100/panes + "%"; 
$("body").css({ width : width }); 
    $(".pane").css({width: panewidth }); 
}); 

Dans cet exemple, j'utilise le corps comme enveloppe, mais il peut s'agir de n'importe quel élément. Dans ce cas, comme il y a 3 volets, la largeur du corps est définie sur 300% et la largeur des volets est définie sur 33,3%. Si vous ajoutez un autre volet, la largeur du corps sera de 400% et la largeur du volet sera de 25% et ainsi de suite.