Slide show code html
bombero-11
Messages postés
460
Date d'inscription
Statut
Membre
Dernière intervention
-
a.brice -
a.brice -
Bonjour,
je voudrait crée sur ma page d'accueil un diaporama, comme celui ci : https://www.marobesoiree.fr/
J'ai réussi a trouver le code HTML du diaporama, mais cependant je ne sait pas a quel endroit ajouter les photos, ou mettre la page de redirection quand le client clique sur la photo, et comment le paramétrer. :-(
Si quelqu’un veut bien m'aider ce serait super
merci a tous !
le code html se trouve ici ; https://sorgalla.com/jcarousel/dist/
je voudrait crée sur ma page d'accueil un diaporama, comme celui ci : https://www.marobesoiree.fr/
J'ai réussi a trouver le code HTML du diaporama, mais cependant je ne sait pas a quel endroit ajouter les photos, ou mettre la page de redirection quand le client clique sur la photo, et comment le paramétrer. :-(
Si quelqu’un veut bien m'aider ce serait super
merci a tous !
le code html se trouve ici ; https://sorgalla.com/jcarousel/dist/
A voir également:
- Slide show code html
- Code ascii - Guide
- Usb show - Télécharger - Sauvegarde
- Code puk bloqué - Guide
- Code activation windows 10 - Guide
- Comment déverrouiller un téléphone quand on a oublié le code - Guide
1 réponse
code html
<ul class="slideshow1">
<li><img src=""quot;votre_image" alt></li>
<li><img src=""quot;votre_image" alt></li>
<li><img src=""quot;votre_image" alt></li>
</ul>
code css
slideshow1 [src]{
position:absolute;
opacity:0;
left:0;
-webkit-mask-image:linear-gradient(45deg,hsl(0,0%,0%) 47%,transparent 52%);
-webkit-mask-size:300% 100%;
animation:slide 9s linear infinite}
.slideshow1{
list-style:none;
position:relative;
overflow:hidden;
width:600px;
height:400px;
margin:auto;
border:10px solid #fff;
box-shadow:0 1px 4px hsla(0,0%,0%,.4)}
.slideshow1 [src=""quot;../../astuces/tuto_diapo_css/2.jpg"]{animation-delay:3s}
.slideshow1 [src=""quot;../../astuces/tuto_diapo_css/3.jpg"]{animation-delay:6s}
@keyframes slide{
12%{opacity:1}
25%{opacity:1;-webkit-mask-position:0}
32%{opacity:0;-webkit-mask-position:100%}
100%{opacity:0}}
il faut connaitre les animation css3 pour comprendre ce que je fais
<ul class="slideshow1">
<li><img src=""quot;votre_image" alt></li>
<li><img src=""quot;votre_image" alt></li>
<li><img src=""quot;votre_image" alt></li>
</ul>
code css
slideshow1 [src]{
position:absolute;
opacity:0;
left:0;
-webkit-mask-image:linear-gradient(45deg,hsl(0,0%,0%) 47%,transparent 52%);
-webkit-mask-size:300% 100%;
animation:slide 9s linear infinite}
.slideshow1{
list-style:none;
position:relative;
overflow:hidden;
width:600px;
height:400px;
margin:auto;
border:10px solid #fff;
box-shadow:0 1px 4px hsla(0,0%,0%,.4)}
.slideshow1 [src=""quot;../../astuces/tuto_diapo_css/2.jpg"]{animation-delay:3s}
.slideshow1 [src=""quot;../../astuces/tuto_diapo_css/3.jpg"]{animation-delay:6s}
@keyframes slide{
12%{opacity:1}
25%{opacity:1;-webkit-mask-position:0}
32%{opacity:0;-webkit-mask-position:100%}
100%{opacity:0}}
il faut connaitre les animation css3 pour comprendre ce que je fais
