[Résolu] Recherche slider touch

Bonjour

J'ai bien cherché et j'ai trouvé ce topic sur le slide touch mais en essayant la démo sur tablette je le trouve extrêmement lent

Du coup je voulais savoir si vous connaissiez un slider qui passe bien et soit fluide sur tablette (éventuellement sur mobile aussi) et qui ne soit pas lourd à charger, sachant que je ce que je ferais slider contiendra des petits images et surtout du texte

Merci d'avance votre attention

Lu
Modifié par Luleen (27 Jul 2011 - 17:09)

Pour plus d'infos, j'ai trouvé sencha touch qui a l'air de bien fonctionner donc ce que je cherche à faire c'est quelque chose qui ressemble à ca (click clik)

Mais je souhaiterais le faire en HTML5 car je n'arrive pas à implémenter ceci dans ma page... et cela ne fonctionne que sous chrome

Merci

Lu

HTML5 ne fait quand même pas de magie.

Merci pour la réponse mais je suis sure que c'est possible avec toutes les fonctions touch et les librairies javascript.

Lu

Javascript est présentement beaucoup plus approprié pour la création de slider.

Sencha est une compagnie sérieuse, si tu n'as pas réussi à utiliser leur slider, c'est probablement que tu l'as mal implémenté sur ta page...

Même si j'avais pu l'implementer correctement, Sencha ne fonctionne que sous Chrome et cela ne me suffit pas.

En ce qui concerne ta première phrase, je le sais bien et c'est pour cela que je viens chercher de l'aide ici même

Ok, alors selon toi le ralentissement avec ta première solution était dû à la performance du Javascript et pas du tout à la vitesse de chargement du contenu du périphérique utilisé ?

C'est moi ou tu sembles agressif dans tes réponses ?

Ce doit être moi, désolée de ne pas être aussi experte que toi.

Bref oui je pense bien que certaines librairies JS ne fonctionnent pas bien sur tablette ou mobile, qu'elles freezent ma page et bloquent ainsi tout mon contenu.
Mais n'hésite pas à m'éclairer, je me trompe peut être (l'erreur est humaine).

Je sais que ce forum n'est pas une réponse à toutes nos questions ni nos problèmes de code mais un minimum de courtoisie serait apprécié (pour ma part du moins)

Désolé si j'ai pu paraître agressif, ce n'était pas voulu !

Et je suis encore loin de pouvoir me qualifier d'expert, il y a sans doute plusieurs choses que tu connais et que j'ignore

Je vais tester les démos aussi sur mon mobile pour voir le résultat. Je demandais au sujet des images parce que selon la structure, il se peut que les images ne se charge pas immédiatement et c'est peut-être leur chargement qui fait laggé la machine...


Cela dit, je sais que les animations de jQuery mobile par exemple ont du mal sur Androïd... As-tu déjà rencontré un slider fluide sur mobile ?

(encore désolé si j'ai pu paraître agressif !)

Retour de test:

Pour moi DragDealer est assez fluide sur mon Galaxy S (Android 2.2)

Aurais-tu un exemple en ligne du slider sur lequel tu travaillais ?

Pardon c'est possible que ce soit moi qui ai mal compris aussi (la magie d'internet sans les intonations quoi)

Dragdealer passe assez bien sur mon htc desire mais le soucis est qu'il ne propose pas de slider et je ne saurais pas en coder

D'où ma requete initiale qui est de trouver un slider déjà prêt à l'emploi

Lu

Edit : milles excuses, je n'avais pas vu le slider en bas de la page, alors effectivement ca correspond plus ou moins à ce que je cherche mais il se bloque sur mon téléphone et j'avoue ne pas savoir si ca vient du js ou des images (même si j'aurais tendance à dire le js). Je vais essayer de tester sur d'autres devices
Modifié par Luleen (26 Jul 2011 - 10:52)

Non ca ne va toujours pas car il me faut un carousel qui s'adapte en fonction d'une résolution...

Si tout ce que tu veux c'est un carrousel ou on clique sur des boutons, ce sera pareil comme un slider sur ordinateur de bureau. Tu n'auras rien à coder différemment.

Ensuite, il te suffirait de mettre un max-width: 100% à tes images pour qu'elles s'adaptent à la résolution de l'écran. (dans le cas d'un slide fade-in/fade-out)

Et si tu dois mettre tes images les unes à côtés des autres et cacher celles qui dépassent pour qu'elles balaient l'ancienne image. Eh bien alors... Je crois que tu pourrais récupérer assez aisément la largeur de l'écran via JS:

screen.width
// et
screen.height

et donner cette largeur à ton image, par exemple:

$("#slide img").css("width",screen.width);

Je n'ai pas testé, mais ça pourrait ressembler à cela grosso-modo.

Justement je ne veux pas d'un carrousel ou on clique sur des boutons, je veux un carrousel touch, donc qui correspond assez bien à celui de dragdealer meme si j'aurais beaucoup de choses à changer

Du coup je vais voir avec ce que tu me donnes (le screen-width) essayer de refaire un carous en js avec Dragdealer, ca va etre fun

Ce ne seront pas des images qui devront slider mais des div, mais je pense que le principe reste le même

En gros il me faut ceci
http://dulcigirl.free.fr/drag/

mais qu'il puisse se redimensionner en fonction de la taille de la fenêtre...

Je vais tester.

Salut,

Ici l'astuce est relativement simple et seulement en CSS.

Sachant qu'il n'y aura que 5 images dans son slide, la taille de la boite conteneur (du slide) a été fixé à 500% (donc 5 images X 100% de la page)

Et comme il y a 5 images, chacune doit se partager à part égale 100% de leur conteneur (100% de la taille de leur conteneur = 500% de la taille de la page), donc width: 20%; sur chacune.

Ils ont fixé un height, mais dans le cas de réelles images, il ne faudra évidemment pas en fixer pour qu'elles gardent leur proportions.
Modifié par Vaxilart (27 Jul 2011 - 16:32)

Ouiiii c'est ce que j'ai fais aussi au final

Pour le coup je suis bien contente ! Merci de m'avoir aiguillée !

Lu

Tu laisseras ton résultat final quand tu y arriveras, j'aimerais bien voir ce que ça peut donner en production

Bonne chance !

Le lien est ci dessus, le même que pour mon test

Ah en production, ca ne le sera pas avant plusieurs mois j'en ai bien peur