Bonjour à tous!

excusez moi pour ma question je ne sais pas si cela se dit slider!!!!

voilà je odis faire un slide sur ne image de presentation mais je ne sais pas si je dois le faire sur le html et css ou purement en css avec 2 background-image!!!!
de plus je dois rajouter les flèches de chaque coté de l'image afin de cliquer dessus pour passer à la suivante(image).

pouvez vous m'aider?
Bonjour darkodeur,

darkodeur a écrit :
je ne sais pas si je dois le faire sur le html et css ou purement en css avec 2 background-image


Tout dépend. (pour dire ça tu vas me dire...)

Si t'es images ne sont que pure décoration, alors pourquoi pas uniquement en css.

Par contre si tes images ont une importance et que tu souhaites en plus les référencer ou pratiquer la SEO, il vaudra mieux les intégrer en html.
Greg_Lumiere a écrit :
Si tes images ne sont que pure décoration, alors pourquoi pas uniquement en css.

Par contre si tes images ont une importance et que tu souhaites en plus les référencer ou pratiquer la SEO, il vaudra mieux les intégrer en html.

On peut aussi utiliser les deux : l'image proprement dite pour le référencement et son alter ego div+background-image englobant le tout pour la souplesse d'utilisation.

Exemple (avec en plus ici l'utilisation de <picture>) : Slideshows
Olivier C a écrit :
On peut aussi utiliser les deux : l'image proprement dite pour le référencement et son alter ego div+background-image englobant le tout pour la souplesse d'utilisation.

Bonjour Olivier,

Je ne comprends pas très bien l'intérêt d'une telle pratique. En effet vu que tu déclares tes images en Css, pourquoi surcharger par des déclarations en html (en prenant le cas où les images sont uniquement à but stylistique) ?
Dans le cas où les images sont significatives et méritent d'êtres référencées, je retourne la question ; pourquoi surcharger les déclarations Css.

Est-ce pour l'exemple que tu ne déclare à tes image qu'un seul srcset à 100vw ? Dans la pratique ne faudrait-il pas détailler ces sources (bien sûr en fonction du design et dans l'éventualité ou en ne déclarant qu'en html, ce détail serait forcément présent) ?

Dans l'éventualité d'une réponse positive à celle-ci, ça me renvoi doublement vers la première question.

Loin de moi l'idée d'une quelconque critique mais je souhaite comprendre la démarche.
Smiley smile
Bonjour Darkodeur,
voici un exemple de diaporama (slider) semi-automatique et/ou automatique :
http://sentrais.eu/diaporama_v-8/diaporama-8.htm
dont le mécanisme est du javascript qui procède à un double jeu de basculements de class css3 d'un couple évolutif d'éléments. D'où son titre : un diaporama dynamique

Question sur le référencement d'images qu'il faut évidemment considérer, que soulève judicieusement Greg_Lumiere dans ses posts. Meilleur que des noms d'images i1.png i2.png i3.png, on pourrait toutefois se satisfaire de ceci : theme-1.png theme-2.png theme-3.png ... quitte à élaborer un second voire un troisième diaporama qui renseigneraient d'autres thèmes utiles au référencement par le renom des images. Ainsi le .html proposera theme comme thème particulier qui soit apte au référencement :
<p id="diaporama">
<img id="image_clone" name="image_clone" class="clo_0" src="dia/theme-1.png" />
<img id="image_generique" name="image_generique" class="clo_0" src="dia/theme-1.png" />
</p>
Tu verras par la découverte du code-source de la page que le fichier diaporama.js est simple à décortiquer, et qu'il propose des comments qui te seront utiles pour la compréhension de la stratégie globale et de ses méthodes javascript. Rien cependant ne t'invitera à penser que cette solution serait unique !

Note rédhibitoire : que savons-nous aujourd'hui des moteurs de recherche qui puissent extraire de fichiers .css et .js des données exploitables au référencement ? Sinon google, or un-tout-petit-peu ... hors d'un .js. Mais aujourd'hui, de tous les moteurs : aucun d'un .css, malheureusement.

Une autre prouesse serait de rédiger un slider en pur css3. Mais je doute au-delà d'un impossible référencement, de sa souplesse d'aménagement au gré d'events produits par un visiteur, car je trouve le css3 encore un-peu-beaucoup schizophrène face à jQuery dont au plus javascript.

@Greg_Lumiere :
css et javascript ne peuvent se limiter à de la joliesse : 95% du web est un visuel pour la transmission d'informations (les 5% restants = ? = music en surface + meta-data en sous-terrain), et ce visuel implique le fait de procurer une "trace" intelligible, c'est-à-dire, ici proprement graphique. Mais un esthétisme français peut souffrir parfois de réelles pathologies, qui porterait à réduire les fonctions essentielles du phénomène du très grand langage visuel : j'en redoute volontiers, auprès de toi une virulence certaine ! Ceci dit : tu as parfaitement deviné la limite de tout référencement de slider par .css lorsqu'on envisage des raccourcis fabuleux.

@Olivier C :
le preload des images en ton exemple est à devoir considérer. Ce que j'ai d'emblée considéré dans mon exemple :
http://sentrais.eu/diaporama_v-8/preload.js
et qui devra interpeler Darkodeur pour son projet de slider. Ou lui imposer une multiplication d'écriture ?
Modifié par pictural (06 Dec 2016 - 15:29)