[Résolu] Carousel Responsive - Problème défilement

Bonjour à tous,

Je me permet de vous solliciter car j'ai un problème . J'ai fait un carousel grâce à des images qui proviennent d'une dataJson .
Mes images ont une largeur de 600px par défaut. Grâce au media queries j'ai fait en sorte que lorsque ma page passe à moins de 480px de large, mon carousel diminue également à 300 px de large .

Le problème est que lorsque que je fait défiler mon carousel et puis que je passe ensuite au format smartphone ou vice versa mes images ne sont plus caller et garde la valeur de défilement initiale.

Je dois actualiser ma page a chaque fois que je rétréci ou agrandit ma page pour que mon carrousel se recale suivant la taille des images.

Connaitriez-vous un moyen pour que le carousel se recale automatiquement au rétrécicément ou a l'aggrandissement de la page sans avoir à rafraîchir la page ?

Merci par avance,

Red#One

Bonjour,

Il fonctionne comment, ce carousel ? css pur ? javascript ? autre outil ?

Amicalement,

Bonjour,

Il s'agit de 20 images alignées en float left .
Et les images se décalent vers la gauche ou la droite lorsque je clique sur le bouton next ou prev.

C'est un carousel réalisé en JavaScript .
Modifié par RedOne23 (20 Dec 2018 - 19:19)

Bonjour,

La réponse dépend du code javascript du carousel et de ce qu'il fait.

Amicalement,

voici mon code

https://code.sololearn.com/WVZG2NRiZyDf

avec la Data Json qui est sous le code JS .
Pourriez-vous SVP y jeter un coup d'oeil et me donner votre avis ?

Merci

Bonjour,

La largeur des images est en dur dans le code (et en passant, il semble que ce soit 650px et non 600px). Donc, si tu modifies la largeur visible de ton carrousel ainsi que la largeur des images via css pour les fenêtres étroites, le javascript, lui continuera de se baser sur une largeur de 650px, et du coup, c'est la panique dans le rendu et aussi quand on passe d'une image à une autre . En petite taille, un click sur une flèche déplace la portion visible du carrousel d'environ 2 images et non d'1 seule (je dis environ car il y a cette question de 650 au lieu de 600 qui reste à éclaircir).

Je ferais donc 2 choses (je suppose pour la suite que les images font en fait 650px, sinon faudra peut-être adapter un peu) :

1) dans le css
- Je ferais correspondre la largeur visible du carrousel (l'élément #masque si j'ai bien compris) à celle de tes images (soit 650px et 300px selon la largeur de la fenêtre). Actuellement, c'est déjà le cas. mais il faudrait quand même imposer une largeur pour les images au cas où celles-ci ne feraient pas la même largeur que le #masque pour les fenêtres de taille "normale", c'est à dire rajouter :

main #film img {
  width: 650px;
}

- il ne faut pas mettre de width dans le css pour #film (la taille est calculée par la suite dans le JS en fonction du nombre d'images dans le carrousel). Même si tu le laisses, ça marcherait mais ça fait désordre. Et de plus (voir ci-dessous), on va donner à #film une largeur en % et non en px.

2) dans le JS
- je changerais la manière de calculer la largeur de #film, et je lui donnerais une valeur en % et non en px (j'ai mis en commentaire la ligne à supprimer) :

var nbImages = data.length;
//- var lgFilm = nbImages * 650;
var lgFilm = (nbImages * 100) + "%"; //+
$("#film").css("width", lgFilm);

Ainsi, #film aura toujours une taille proportionnelle à son parent qui est #masque. Quelque soit la largeur de #masque, #film aura la taille appropriée.

- de même, je changerais la manière de calculer les positions quand on clique sur les flèches de navigation, et leur donnerais une valeur en % au lieu de px. De plus, je me baserais sur la largeur de #masque pour faire le calcul au lieu de coder en dur une valeur fixe (j'ai mis en commentaire la ligne à supprimer) :

// dans $("#next").click()
var posX = $("#film").position().left; // Relevé de la position
//- var newPos = posX - 650; // Déterminer la nouvelle position
var maskWidth =  $("#masque").width(); //+
var newPos = (((posX - maskWidth) /maskWidth) * 100) + "%"; //+

// dans $("#prev").click()
var posX = $("#film").position().left; // Relevé de la position
//- var newPos = posX + 650; // Déterminer la nouvelle position
var maskWidth =  $("#masque").width(); //+
var newPos = (((posX + maskWidth) /maskWidth) * 100) + "%"; //+

Ainsi, quand on modifie la taille de #masque via les css, d'une part l'image montrée restera la bonne puisque sa position est calculée en %, et d'autre part, les flèches décaleront les images correctement puisque l'incrément et le décrément des positions sont calculés en fonction de la taille de #masque.

Amicalement,
Modifié par parsimonhi (20 Dec 2018 - 22:25)

Parsimonhi,

Merci d'avoir pris le temps pour relever mes erreurs et de les corriger.
J'ai fait les modifications et tout marche à merveille .

Je n'ai pas encore tout les réflexes, ça viendra avec la pratique.

Merci encore .

Bonne soirée,
Modifié par RedOne23 (20 Dec 2018 - 23:53)

Bonsoir,

J'ai un autre problème concernant ce code.
Lorsque que je consulte la console firefox le message d'erreur suivant s'affiche .

error analysis XML : Syntax error
location : : file:///C:/Users/****************/data/data.json

Sauriez-vous me dire cela peut venir ?

Merci par avance,

Red#One

Bonjour,

Erreur de syntaxe dans le fichier data.json. J'imagine que dans ton code (javascript ?) une fonction essaie de traiter le contenu de ce fichier, mais en pensant que c'est du XML alors que c'est du JSON.

Amicalement,

Merci pour ton retour.

J'ai pourtant tester la validité du Data JSON grâce à un "JSON validator". Tout semble être bon.

Je vais y jeter un coup d'œil à nouveau.

Merci,

Bonjour,

RedOne23 a écrit :
J'ai pourtant tester la validité du Data JSON grâce à un "JSON validator". Tout semble être bon.

Ton json est sans doute valide, mais à un moment, ton code a probablement essayé de le traiter en supposant que c'était du XML qui n'a pas du tout la même syntaxe. L'erreur n'est pas dans le json, mais dans le code qui le manipule.

Amicalement,