28172 sujets

CSS et mise en forme, CSS3

[Résolu] Scroll-snap responsive

Bonjour,
je tente de faire un carrousel avec la fonction scroll-snap. Il y a des tas de modèles, j'en ai choisi un parmi d'autres. Tout est en place, mais pour celui que j'ai choisi, et afin qu'il soit responsive, je suis obligé de mettre width: auto; et height: auto sur le contenair et sur l'enfant. Alors que partout il est dit que l'on doit donner une valeur fixe au contenair principal. Je ne comprends pas trop comment tout ça peut être responsive, en valeurs fixes en px. J'ai essayé un modèle de carroussel scroll-snap avec grid. Lui, il n'est pas responsive mais le snap fonctionne !
Le second problème, c'est qu'avec le code ci-dessous, les points d'ancrage ne fonctionnent pas, au changement d'image à la souris ou à la main. L'image arrive au milieu de la page et non à sa place au milieu de son contenair, comme la fonction scroll-snap le permet. Je sais que Mozilla 68 a abandonné l'ancienne spécification de scroll-snap pour une nouvelle, mais j'en tiens compte et ça ne veut pas fonctionner malgré tout.
Et j'en ai réalisé un scroll-snap vertical pour le background d'une page, il fonctionne très bien.
Aucun site n'est en ligne, voici le code. 
<div class="galery">
<div class="galery horizontal">
  <img src="Images/Dunun-Nature-1024-C.jpg" />
  <img src="Images/Beoumi-1024.jpg" />
  <img src="Images/Dunun-Nature-1024-C.jpg" />
  <img src="Images/Beoumi-1024.jpg" />
</div>
</div>

.galery {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  display: inline-block;
  width: auto;
  height: auto;
  margin: 20px;
  }
.galery.horizontal {
  width: auto;
  height: auto;
  scroll-snap-align: center;
  white-space: nowrap;
  }

Merci pour l'aide.
Bonjour,
merci, cette fois, c'est responsive, et je vois que tu as ajouté les préfix.
Pour le moment, je ne peux pas tester le scroll-snap, parce que les images sont toutes les unes au dessus des autres, sans la barre de défilement. J'ai pourtant copié/collé ton code. Je vais voir ça. Et serait-il possible de faire en sorte que le passage d'une image à l'autre soit plus doux?
Merci.
C'est bon, ça fonctionne.
Simplement, voyant que ton html était le même que le mien et avec des images différentes, je ne l'avais pas recopié. Et bien sûr, il y avait un tiret entre galery et horizontal, ce qui ne passait pas.
J'ai un peu modifié les dimensions pour l'adapter à ma page. J'avais pourtant lu sur un site en Anglais que si l'on ne donnait pas de hauteur au contenair parent, ça ne fonctionnait pas. Là, avec auto, c'est pourtant bon. J'aurais aussi aimé que le défilement soit un peu plus doux, mais il semble que l'on peut y ajouter des animations. À voir plus tard.
Reste maintenant à ajouter un bout de code afin de rendre plus visible la barre de défilement, qui est cachée par la couleur de certaines images. J'ai vu ça quelque part.
Merci bien pour les nouvelles specs. Smiley smile
Sujet clos
Aller à