Revenir en haut de page
Accueil » Blog » Des sliders responsive compatibles sur IE !

Des sliders responsive compatibles sur IE !

Publié le 5 décembre 2012 par moodytryme | Laisser un commentaire (0)

Schema responsive webdesign

J’ai testé pour vous aujourd’hui plusieurs JS de sliders responsive. Ok, rien de très original en ce moment avec cette tendance au responsive webdesign.

Mais avez-vous déjà testé votre slider responsive sur Internet Explorer ?

 

Quand IE met votre responsive à nu

Destroy Internet Explorer by ZaKaR – http://zakar.deviantart.com/

Vous venez de passer une journée à vérifier votre site sur tous les formats possibles (1024 pixels, 768pixels), vous avez emprunté les tablettes et smartphones de votre entourage, et enfin vous passez par l’étape inévitable du « débuggage IE« . Et malheureusement, je ne parle pas que des vieilles versions IE 6 ou IE 7, j’ai aussi testé certains sliders plus ou moins connus sur des versions IE 8 et IE 9.

En même temps, il fallait s’y attendre. Le responsive marche essentiellement grâce au CSS3, et IE n’est pas encore entièrement compatible. Ethan Marcotte dans son livre « Responsive webdesign » (collection Book Apart, éditions Eyrolles) nous avertit d’avance des mauvaises surprises qu’Internet Explorer nous réserve.

Même la Bible du responsive peut se tromper

robot or not internet explorer

Aperçu du site test « Robot or not » sur IE 7

Sur Internet Explorer 7, le site « Robot or not » du designer Ethan Marcotte s’adapte à l’écran. Sauf que le slider ne marche pas, et les flèches de navigation se superposent. Oui, je pinaille je pinaille ! Il n’empêche que si votre cible est composée d’utilisateurs de vieux ordinateurs non mis à jour, vous risquez de créer un site avec un slider non fonctionnel.

Le javascript conseillé dans le livre est celui de Mathias Bynens, que j’ai moi-même testé.  Je suis tombée sur plusieurs topics dans la rubrique « Problèmes » (Issues) posant la question de la non-compatibilité avec Internet Explorer.

 

D’autres sliders responsive qui buggent sous IE

 

J’ai testé d’autres sliders sélectionnés par le Blog du Webdesign, et certains ne marchent pas terrible sur Internet Explorer.

Flexslider par Woothemes

Le slider ne se met pas en route sur IE8 et IE7

Responsive CSS3 without Javascript

Responsive CSS3 without javascript affiche les images du slider flottant les une à côté des autres

Camera

http://www.pixedelic.com/plugins/camera/

Slider « Camera » sur IE 7 http://www.pixedelic.com/plugins/camera/

Et ceux qui fonctionnent ?

Pas d’inquiétude, j’ai aussi trouvé des sliders responsive ET compatibles avec le navigateur maudit !

Je vous conseille d’utiliser les suivants :

ResponsiveSlides.js v1.32

A part l’opacité mais ça c’est normal sous Internet Explorer ! http://responsive-slides.viljamis.com/

ResponsiveSlides.js qui marche sur tous les navigateurs !

Sequence jquery slider plugin

Plutôt stylé comme slider en plus ! http://www.sequencejs.com/themes/modern-slide-in/

Sequence un slider responsive qui marche !

Blueberry jquery slider

Rectification de ma part, le slider est buggé sur IE7http://marktyrrell.com/labs/blueberry/

Le slider Blueberry qui fonctionne sauf sur IE7

 

Décidément, c’est bien difficile de trouver des sliders responsive qui fonctionnent proprement sur tous les navigateurs. Je pense que le mieux de toute façon c’est de corriger le bug voire de créer le javascript soi-même !

Si vous trouvez des sliders responsive, ça m’intéresse ;) !

 
 
 

Commentaires

Laisser un commentaire