Slider en infinite scroll saccadé

Salut

J'ai réussi à faire mon slider en infinite scroll avec ma méthode de déplacement des éléments en JS.
https://codepen.io/kerlutinoec/pen/qBpoJjQ

Mais le problème c'est que c'est saccadé. Ca fait assez dégueulasse ; il y a des sauts d'image double et des blocages.

Comment pourrais-je fluidifier cela ? (Ma méthode est elle la bonne ?)

Mes critères sont :
- que l'ont puisse toujours scroller sans javascript
- affichage de plusieurs images à la fois en fonction de la largeur
- qu'aussi bien les boutons que le scroll horizontal soit utilisable
- conserver si possible le scrollsnap
- et avoir le scroll infini (c'est le passage à cette étape qui a induit ces saccades)

Suite à cette question :
https://forum.alsacreations.com/topic-5-89466-1.html
j'ai pu supprimer les sauts d'images en double.

Mais ça reste saccadé !!!

En fait il faudrait que les déplacements d'images n'ai lieu que quand le scroll est fini (scroll momentum inclus). Mais je ne sais pas comment faire.
(Et il y aura alors le risque que le scroll bloque en bout de liste lors d'un scroll rapide de la totalité.) Y'a peut être une autre méthode ?

Salut,

j'avais commencé a bidouillé sur le même genre de slider (j'ai l'impression que c'était déjà celui la avec les images à la con mais ça remonte déjà à un certains temps j'ai l'impression du coup ce n'était sans doute pas exactement le même)

De mémoire j'avais jouer avec la fonction scrollIntoView pour faire glisser les images mais j'avais eu je ne sais plus trop quel problème qui faisait que ça déconnait

Je crois que c'était un problème de savoir si l'image est déjà dans la vue ou pas et que du coup le clique sur la flèche ne faisait "rien" au départ quand je demandais a slide vers la 2e photo alors qu'elle était déjà affichée

Mathieuu a écrit :
Salut,

j'avais commencé a bidouillé sur le même genre de slider (j'ai l'impression que c'était déjà celui la avec les images à la con mais ça remonte déjà à un certains temps j'ai l'impression du coup ce n'était sans doute pas exactement le même)

De mémoire j'avais jouer avec la fonction scrollIntoView pour faire glisser les images mais j'avais eu je ne sais plus trop quel problème qui faisait que ça déconnait

Je crois que c'était un problème de savoir si l'image est déjà dans la vue ou pas et que du coup le clique sur la flèche ne faisait "rien" au départ quand je demandais a slide vers la 2e photo alors qu'elle était déjà affichée

Ce slider est une version remaniée de celle que tu avais du voir, notamment au niveau du JavaScript.

kerlutinoec a écrit :
Suite à cette question :
https://forum.alsacreations.com/topic-5-89466-1.html
j'ai pu supprimer les sauts d'images en double.

Mais ça reste saccadé !!!

En fait il faudrait que les déplacements d'images n'ai lieu que quand le scroll est fini (scroll momentum inclus). Mais je ne sais pas comment faire.
(Et il y aura alors le risque que le scroll bloque en bout de liste lors d'un scroll rapide de la totalité.) Y'a peut être une autre méthode ?

Salut
Voilà la suite (si y'a des gens qui lisent!)...
Je me suis rendu compte que l'essentiel des saccades était du au

scroll-snap-type: x mandatory; 

Je vais donc me résoudre à le virer !

Il restait toutefois quelques saccades sur des ordis un peu ancien quand le JS se déclenche pendant le scroll manuel et je suis resté sur mon idée de n’exécuter le JS qu'à la fin du scroll.
J'ai trouvé cette méthode : https://stackoverflow.com/questions/4620906/how-do-i-know-when-ive-stopped-scrolling
C'est nettement mieux !

Il reste le problème lors d'un scroll trop long/rapide sans pause où on arrive en bout de liste sans permettre l'execution du script : ça bloque temporairement. Faut dire que pour le moment il n'y a que 7 images !
Je me suis dit qu'il suffisait de multiplier les images, genre 2X plus à droite et 2X plus à gauche. Mais j'aimerais éviter de faire ça directement dans le HTML pour des raisons de SEO.
Comment faire ça proprement et rapidement en JS ?
J'ai tenté un

var content=real.innerHTML;
real.appendChild(content);
real.children[0].prepend(content);
real.appendChild(content);
real.children[0].prepend(content);

mais ça n'a pas l'air d'être bon.

Je me demande si je ne vais créer un nouveau sujet pour cette question...

kerlutinoec a écrit :

Il reste le problème lors d'un scroll trop long/rapide sans pause où on arrive en bout de liste sans permettre l'execution du script : ça bloque temporairement. Faut dire que pour le moment il n'y a que 7 images !
Je me suis dit qu'il suffisait de multiplier les images, genre 2X plus à droite et 2X plus à gauche. Mais j'aimerais éviter de faire ça directement dans le HTML pour des raisons de SEO.
Comment faire ça proprement et rapidement en JS ?
J'ai tenté un

var content=real.innerHTML;
real.appendChild(content);
real.children[0].prepend(content);
real.appendChild(content);
real.children[0].prepend(content);

mais ça n'a pas l'air d'être bon.

Bon y'avait plus simple :

real.innerHTML=(content)+(content)+(content)+(content);
real.scrollBy({ left: (real.children[0].offsetWidth)*14 });

Bon y'a encore du béboguage parce que des fois ça s'arrête complètement de fonctionner...
Modifié par kerlutinoec (13 Apr 2022 - 17:11)

kerlutinoec a écrit :


Bon y'avait plus simple :

real.innerHTML=(content)+(content)+(content)+(content);
real.scrollBy({ left: (real.children[0].offsetWidth)*14 });

Bon y'a encore du béboguage parce que des fois ça s'arrête complètement de fonctionner...

Si je me contente d'un

real.innerHTML=(content)+(content);
real.scrollBy({ left: (real.children[0].offsetWidth)*2 });

il n'y a plus de blocages (sur mon vieux core2duo !)...
Qui va scroller à fond la caisse en arrière ?!

Saut,

ton idée de real.innerHTML= (content)+(content) me fait me dire qu'on doit simuler l'infini en déplaçant les images d'un bout à l'autre de la liste d'images en fonction de sur quelle flèche on clique.

Un truc du genre :

function slide() {
 real.children[real.childElementCount-1].after(real.children[0]);
}

function unslide() {
real.children[0].before(real.children[real.childElementCount-1]);
}

PS : J'ai enlevé le p dans le paramètre de ces 2 fonctions et le this dans le code html car cela m'a l'air inutile


Edit : J'avais vu rapidement qu'il y avait des calculs du coup je n'avais pas lu le détail du reste de ton code, mais pour le coup la en répondant ça m'a intrigué je me suis demandé comment tu faisais ... et je viens de tilter que mon message ne sert a rien, c'est déjà ce que tu fais , écrit un poil différemment :

real.insertBefore(real.lastElementChild, real.firstElementChild

Du coup on doit pouvoir simplifier un poil plus la ligne en faisant un petit mix des 2 codes :

real.lastElementChild.after(real.firstElementChild);

real.firstElementChild.before(real.lastElementChild);

Modifié par Mathieuu (14 Apr 2022 - 15:49)

Merci pour ton aide Mathieuu
Je pense que j'ai réussi à obtenir quelque chose qui marche correctement.
J'aimerais juste pouvoir optimiser quand j'atteins trop vite le bout du scroll.

Si je déplace les images pendant le scroll ça fait des effets de saccades dégueu sur un ordi peu performant d'où la mis en place du timer qui attend la fin du scroll.
Mais cela induit un blocage au bout si on scroll trop vite (d'où ma multiplication artificielle du nombre d'image). Toutefois cela a une une limite avec trop d'images (28) que je ne comprends pas trop (blocage total du scroll infini, au moins sur l'ordi ancien).

PS: j'en suis là https://codepen.io/kerlutinoec/pen/vYpVJaG
Modifié par kerlutinoec (14 Apr 2022 - 17:03)

kerlutinoec a écrit :


Si je me contente d'un

real.innerHTML=(content)+(content);
real.scrollBy({ left: (real.children[0].offsetWidth)*2 });

il n'y a plus de blocages (sur mon vieux core2duo !)...
Qui va scroller à fond la caisse en arrière ?!

Ce blocage a lieu en vue mobile et sur mon iphone.

Si je remplace

real.innerHTML=(content)+(content)+(content)+(content);
real.scrollBy({ left: (real.children[0].offsetWidth)*14 });

par

var content=real.innerHTML;
real.innerHTML=(content)+(content);
real.scrollBy({ left: (real.children[0].offsetWidth)*7 });
var content=real.innerHTML;
real.innerHTML=(content)+(content);
real.scrollBy({ left: (real.children[0].offsetWidth)*7 });

ça ne bloque plus !

Comment expliquer cela ? La formulation (content)+(content)+(content)+(content) poserait problème ?