1485 sujets

Web Mobile et responsive web design

[Résolu] Problème avec un carrousel sur mobile

Bonjour à tous et à toutes,

J'ai récupéré un carrousel de produits sur CodePen pour le modifier en carrousel d’événements et le mettre sur mon site.
Ce carrousel est sur Bootstrap 3 mais c'est ce que je recherchais (c'est une contrainte que j'ai, mais c'est trop long à expliquer)
Il y a 12 éléments et, sur ordinateur, ils sont par groupe de 4 et sont alignés.

Mon problème se situe sur mobile. En effet, sur mobile, les éléments sont toujours par groupe de 4 mais les uns au-dessus des autres, or je souhaiterais qu'ils apparaissent 1 par 1.

Comment faire SVP ?

Je pense que le problème vient de la structure HTML car quand j'enlève le CSS le problème demeure.
Le truc c'est que j'ai peur de casser tel que c'est sur ordinateur (et qui me va très bien) en voulant régler le problème sur mobile.

J'ai essayé de mettre "col-xs-12 col-md-3" pour que chaque élément prenne toute la largeur de l'écran à la place de "col-md-3" (tout court), mais ça ne change rien, les éléments sont toujours empilés sur mobile.

Voici le CodePen si ça vous intéresse de vous pencher sur mon cas.

En tout cas, merci par avance pour vos réponses Smiley cligne

Bonne journée Smiley cligne
Modérateur
Bonjour,

L'idéal serait de t'appuyer sur un autre type de carrousel , tout d'abord compatible avec les dernières version de bootstrap si tu souhaites en faire usage ailleurs sur la page, puis pour des raisons de compatibilité de structure et la chevelure de celui qui va s'y coller Smiley smile .

A partir de ton code, il faudrait imbriquer 2 carrousels, l'un qui déplace tes block de 4 et un second (qui se déclenche sur les petits écran) qui déplacent individuellement les éléments de tes block un par en synchronisant ces block pour qu'il s'affichent chacun leur tour lorsque leur enfants ont fait un tour ... Bref , c'est pas la meilleur méthode, le mieux est de faire un script maison, cela économisera beaucoup de temps.
Bonjour GCyrillus,

Merci beaucoup pour ta réponse Smiley cligne Smiley merci
J'ai fini par changer de carrousel qui, je pense, reproduit ce que tu m'expliquais.

Avec cet autre carrousel, j'ai 12 groupes de 4 éléments.
Sur le groupe 1 il y a les éléments 1, 2, 3 et 4
Sur le groupe 2 il y a les éléments 2, 3, 4 et 5
Sur le groupe 3 il y a les éléments 3, 4, 5 et 6
etc...
(Je ne sais pas si je vais arriver à bien expliquer, mais) Le 1er élément de chaque groupe est "authentique". C'est le seul de chaque groupe qui soit écrit en HTML. Les 3 autres sont des copies réalisées à l'aide de JavaScript.
Visuellement :
- sur ordinateur, on a les 12 groupes qui se succèdent avec 4 éléments côte à côte
- sur mobile, on a là aussi les 12 groupes qui se succèdent mais cette fois-ci avec 4 éléments les uns au-dessus des autres.
A première vue, c'est comme le précédent carrousel, mais la différence ici c'est qu'il y a 12 groupes (contre 3 sur l'autre carrousel) et surtout que le premier élément de chaque groupe se suit (c'est l'élément 1 sur le groupe 1, l'élément 2 sur le groupe 2, l'élément 3 sur le groupe 3, etc...). Sur mobile, comme on ne voit que le 1er élément de chaque groupe, on a l'impression qu'ils se suivent.

Bref, ça fonctionne.
S'il y en a que ça intéressent, voici l'URL du codepen https://codepen.io/spip93/pen/MWmXveW

Encore merci pour tes conseils GCyrillus
Bonne journée Smiley cligne
Sujet clos
Aller à