Un slider pur CSS

Est-ce vraiment viable?

a marqué ce sujet comme résolu.

Salut,
je suis en train de développer un site et j'aurais besoin d'un slider. Grand adorateur du CSS, je rechigne à intégrer du JS dans mon site. Or pour un slider, ça devient un peu compliqué…
J'ai réussi à m'approprier le code du site suivant : http://www.creativejuiz.fr/trytotry/juizy-slideshow-full-css3-html5/.
Mais je n'arrive pas à afficher un texte lorsque l'on passe d'une photo à l'autre avec les flèches. En effet quand on utilise ces flèches, c'est une nouvelle div (.c_slider) qui vient prendre le relai et qui affiche une partie de son background (le background est 4 fois plus large et il contient les quatre photos les unes à côté des autres). De même lors de l'utilisation des "petits points" permettant d’accéder directement à la photo voulu.

Je me demande donc, est-il possible de faire un slider avec du texte en CSS?
Si vous avez des suggestions/idées, n'hésitez pas :)

+0 -0

Sans répondre au problème du non affichage du texte en naviguant via les flèches, je me permets d'apporter mes 2 cents.

Il me semble que vouloir "tout faire en CSS3" juste pour ne pas utiliser du javascript risque de te compliquer la vie plus que te la simplifier. De plus, tu t'expose plus particulièrement aux risque de voir pointer de vieux navigos qui te feront un rendu catastrophique de ton slideshow (même si, pour nuancer, le javascript peut aussi être désactivé par le client).

Après, tu as peut être des slideshows plus "light" qui ne demandent qu'un minimum de javascript, contrairement à beaucoup qui nécessitent sine qua non jQuery.

+0 -0

C'est possible oui, mais quant à savoir si c'est une bonne idée… Comme le dit elyppire, le problème reste la rétro-compatibilité et la compatibilité avec les navigateurs mobiles. A mon avis, un soupçon de JS ne serait pas un mal. Il doit y avoir moyen de faire un truc light, ou le JS ne serait utilisé QUE pour le changement des images, et l'animation serait faite en CSS, ainsi, un nouveau navigo afficherait quelque chose de joli, et un vieux, un slideshow "non animé", mais qui fonctionne.

+1 -0

Merci pour vos deux réponses.
Je pense que je vais effectivement pencher pour une version "JS épurée".

Comme je ne connais pas le JS, vous allez peut-être me revoir poser des questions ^^
Je posterai le code finalement utilisé ici pour les suivants :)

(et encore merci)

+0 -0

Je plussoie avec insistance elyppire et Thunderseb !

Cependant, j'ajouterais qu'un bon slider qui respecte l'amélioration progressive (j'adore ce mot) ne doit pas avoir un rendu moche si JS est désactivé. Cela implique de générer les flèches de navigation en JS et d'avoir un affichage minimal qui fonctionne sans JS, par exemple sous la forme d'une galerie d'image avec légende, les unes à côtés des autres.

On peut aussi complètement supprimer le slider si JS n'est pas là, mais c'est un peu radical. :°

+1 -0

Ce que tu appelle une "version JS épurée" est la meilleure des choses. Comme l'ont dit les auteurs des 2 réponses qui t'ont déjà aidé, déjà tu maximise la rétrocompatibilité avec une démarche d'amélioration progressive. Tu propose une version fonctionnelle sur les navigateurs ne supportant pas les animations CSS, et tu ajoute des animations pour ceux qui les supportent.

Mais cela apporte aussi un autre avantage : le style est bien découplé de la logique. Ton JS ne fais qu'appliquer des classes aux éléments. Tu peux donc très facilement modifier le comportement des animations sans avoir à repasser sur ton JS.

Bon courage :)

+1 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte