28172 sujets
CSS et mise en forme, CSS3
abeille a écrit :
Bonjour,
je cherche à réaliser un diaporama, ou slideshow de 5 photos qui passent en continu.
Est ce possible sans que ces images soient définies en background dans le Css?
Merci pour votre aide.
Franchement, t'as pas cherché beaucoup, car en tapant juste "silideshow html" sur ton moteur de recherche préféré il t'en retourne une palanquée...
Un parmi tant d'autres :
W3.CSS Slideshow
Pas le meilleur, pas le pire... à toi d'adapter à tes besoins ou chercher un autre modèle.
Ok, merci Sepecat.
J'ai fait d'abord une recherche sur Google, et j'ai trouvé tant de possibilités que je savais plus laquelle prendre:
* des logiciels en ligne pour faire un diaporama
* réaliser un diaporama en javascript,
* réaliser un diapo en html /css, mais en images background...
* Ou alors datant d'il y a 10 ans et plus.
etc...
C'est pour ça que je demandais ici, puisque je suis sûr de trouver de bon conseils!
J'ai fait d'abord une recherche sur Google, et j'ai trouvé tant de possibilités que je savais plus laquelle prendre:
* des logiciels en ligne pour faire un diaporama
* réaliser un diaporama en javascript,
* réaliser un diapo en html /css, mais en images background...
* Ou alors datant d'il y a 10 ans et plus.
etc...
C'est pour ça que je demandais ici, puisque je suis sûr de trouver de bon conseils!
En voici un autre basé sur une simple animation, text-indent et quelque class selon le nombre d'image, direction en slide ou par saut. http://codepen.io/gc-nomade/pen/oLLPOg
.diap le conteneur, il n'y que la largeur a mettre à jour et éventuellement display/float
.oX ou x est le nombre d'image pour mettre à jour la valeur de text-indent: x00%;
.slide fait glisser les images
.rtl inverse le sens visuel du slide.
En gros c'est un <marquee> sans le défaut du trou blanc en doublant la première image que l'on remet à la fin sans la compter.
edit Les commentaires suffisent comme mode d'emploi et une petite recherche sur les animation et text-indent devrait suffire a ce que tu comprennes comment cela fonctionne,
Modifié par gcyrillus (16 Jun 2016 - 21:46)
.diap le conteneur, il n'y que la largeur a mettre à jour et éventuellement display/float
.oX ou x est le nombre d'image pour mettre à jour la valeur de text-indent: x00%;
.slide fait glisser les images
.rtl inverse le sens visuel du slide.
En gros c'est un <marquee> sans le défaut du trou blanc en doublant la première image que l'on remet à la fin sans la compter.
edit Les commentaires suffisent comme mode d'emploi et une petite recherche sur les animation et text-indent devrait suffire a ce que tu comprennes comment cela fonctionne,
Modifié par gcyrillus (16 Jun 2016 - 21:46)
Hello,
J'aime beaucoup ce carousel, facilement praametrable et gérant bien les aspects responsive : http://www.owlcarousel.owlgraphic.com
Je rejoins sepecat : il y a vraiment l'embarras du choix donc essaye en donc plusieurs.
J'aime beaucoup ce carousel, facilement praametrable et gérant bien les aspects responsive : http://www.owlcarousel.owlgraphic.com
Je rejoins sepecat : il y a vraiment l'embarras du choix donc essaye en donc plusieurs.
audrasjb a écrit :Cool, ça a l'air pas mal...mais j'ai pas trop compris le fonctionnement!
Hello,
J'aime beaucoup ce carousel, facilement praametrable et gérant bien les aspects responsive : http://www.owlcarousel.owlgraphic.com
Je rejoins sepecat : il y a vraiment l'embarras du choix donc essaye en donc plusieurs.
Cela donne du code pour faire le carrousel?