11567 sujets

JavaScript, DOM et API Web HTML5

Un slider avec une seule image sur mobiles

Bonjour à tous,

c'est amusant, au moment où je pose ma question je vois dans les news un article sur l'utilité des sliders... Smiley ravi

Je cherche.. des pistes... pour créer ou utiliser un slider qui ne mettrait (et ne chargerait) qu'une seule image (fixe) sur les mobiles, pour des raisons de performances...

Sur les sliders existants, souvent, sur les mobiles ce sont les mêmes images qui sont affichées en tout petit et on voit rien de dessus et elles se chargent pour rien....

merci
Administrateur
Bonjour,

pas sûr d'avoir compris la demande ?
Ce que je comprend : avoir sur desktop une barre de vignettes qui au clic affichent l'image en grand pas loin mais sur mobile pas de vignettes, direct une image en pleine largeur et... est-ce qu'on peut swiper, avoir des puces à la place des vignettes et/ou des chevrons pour naviguer d'une image fixe à l'autre ?
J'allais illustrer les nombreuses possibilités avec les démos d'un excellent script existant mais en fait c'est probablement aussi une réponse : https://accessible360.github.io/accessible-slick/ (un unique défaut : c'est en jQuery. M'enfin si on te fait charger des images pour ça, t'es pas à 30 ko près)

EDIT : @parsimonhi un mobile, c'est à présent le truc le plus puissant que je possède. Smiley biggol Je pense qu'une puce A17 Pro enfonce celle d'un Ryzen 5 laptop, résolution (réelle, pas CSS) 2500 et quelques vs 1920px, plus de RAM mais d'accès plus lent je suppose. Il n'y a que la taille de l'écran qui... Smiley ravi
Modifié par Felipe (23 Aug 2024 - 10:35)
Salut. Il y a bien de 3 ans facile maintenant que les sliders se font montrer du doigt en terme d'expérience utilisateur...

Sinon, plusieurs axes d'amélioration :
- pour les images, prévoir plusieurs tailles différentes bien sûr, à l'aides des attributs `srcset` ; ne pas hésiter à les servir en WebP.
- pour le slider en lui-même, tout dépend de la manière dont il a été conçu ; le plus simple serait sans doute de partir d'une simple image et, lorsque la résolution convient, proposer un slider.
- une solution alternative est d'utiliser d'emblée le slider, quelque soit la résolution, et dans ce cas de ne proposer qu'une image.

Pour ces deux dernières propositions on peut détecter la résolution de la fenêtre de navigation en javascript avec `window.innerWidth` ou `window.matchMedia` pour conditionner le script.
Modifié par Olivier C (23 Aug 2024 - 12:07)
Je ne comprends pas ton "problème"

Un slider est un slider, il chargera les images peu importe le support.
Si tu veux remplacer ton slider par une image sur un support type smartphone, c'est juste du html à masquer/afficher via tes media queries, et éventuellement initier ou pas ton slider en js.
Modifié par Pedrothelion (27 Aug 2024 - 15:15)
@Olivier
Oui, ils se font régulièrement démolir, pourtant on continue d'en voir, y compris sur des sites de marques importantes, mode, showbiz). J'avoue que les sliders à défilement automatique m'énervent.
Sinon, avec le LayzyLoad, la première image du slider est affichée en différé, les autres ont tout le temps d'arriver après. Ce qui n'empêche pas le src.
@lionel_css3

Salut,
je t'assure que j'ai des sliders sur un site et qu'avec le LazyLoad, elles se chargent progressivement, y compris latéralement quand je fais glisser.
Ce qui finalement me permet de conserver des images raisonnables en mode mobile. Raisonnable, je veux dire de la largeur de l'écran, et non pas toutes petites.
Je viens encore de tester sur Firefox.
Et j'ai des performances tout à fait correctes sur les téléphones portables.
upload/1725120108-67790-description.png
Prévenir un modérateur
Répondre au sujet
Aller à