Sarmat31
Bonjour et merci par avance à celles et ceux qui voudront bien et pourrront m'apporter quelques éclairages.
Tout d'abords je suis autodidacte (je recherche sur le web les tutos, les conseils et les cours dont j'ai besoin toujours et encore).
J'ai créé un site pour ma petite stucture et j'ai fait un diaporama de 5 slides pour l'exemple sur mon index.html
dont voici les codes html et css (uniquement concernant la partie qui me pose problème) :
"<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NOM de ma structure</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<header>
<table>
<div style="text-align:center">
<tr> <td><img src="Images/LOGO EG.png" width="80%" alt="Logo " /></td>
<td rowspan="2" style="text-align:right" width="350px"><img src="Images/Divers/Image cartouche.png" width="100%" alt="Image titre du site" /></td>
</tr>
<tr><td><ul><li><a href="index.html">ACCUEIL</a></li></ul></td></tr>
</div>
</table>
</header>
<h1>titre<img src="Images/Divers/Imagepage2.png" width="50%"></h1>
<div style="text-align:center">
<h9>T itre</h9>
</div>
<span id="sl_play" class="sl_command"> </span>
<span id="sl_pause" class="sl_command"> </span>
<span id="sl_i1" class="sl_command sl_i"> </span>
<span id="sl_i2" class="sl_command sl_i"> </span>
<span id="sl_i3" class="sl_command sl_i"> </span>
<span id="sl_i4" class="sl_command sl_i"> </span>
<span id="sl_i5" class="sl_command sl_i"> </span>
<section id="slideshow">
<a class="commands prev commands1" href="#sl_i5" title="Aller à la 5ème et dernière diapo"><</a>
<a class="commands next commands1" href="#sl_i2" title="Aller à la 2ème diapo">></a>
<a class="commands prev commands2" href="#sl_i1" title="Aller à la 1ère diapo"><</a>
<a class="commands next commands2" href="#sl_i3" title="Aller à la 3ème diapo">></a>
<a class="commands prev commands3" href="#sl_i2" title="Aller à la 2ème diapo"><</a>
<a class="commands next commands3" href="#sl_i4" title="Aller à la 4ème diapo">></a>
<a class="commands prev commands4" href="#sl_i3" title="Aller à la 3ème diapo"><</a>
<a class="commands next commands4" href="#sl_i5" title="Aller à la 5ème et dernière diapo">></a>
<a class="commands prev commands5" href="#sl_i4" title="Aller à la 4ème slide"><</a>
<a class="commands next commands5" href="#sl_i1" title="Retour à la 1ère diapo">></a>
<a class="play_commands pause" href="#sl_pause" title="Pause">Pause</a>
<a class="play_commands play" href="#sl_play" title="Lecture">Play</a>
<div class="container">
<div class="c_slider"></div>
<div class="slider">
<figure>
<img src="Images/01/image1.jpg" alt="" width="100%" height="100%">
<figcaption>Description</figcaption>
</figure>
<figure>
<img src="Images/02/image2.jpg" alt="" width="100%" height="100%">
<figcaption> Description</figcaption>
</figure>
<figure>
<img src="Images/03/image3.jpg" alt="" width="100%" height="100%">
<figcaption>Description</figcaption>
</figure>
<figure>
<img src="Images/04/image4.png" alt="" width="100%" height="100%">
<figcaption>Description</figcaption>
</figure>
<figure>
<img src="Images/05/image5.png" alt="" width="100%" height="100%">
<figcaption>Description</figcaption>
</figure>
</div>
</div>
<ul class="dots_commands">
<li><a title="Afficher la 1ère diapo" href="#sl_i1">Diapo 1</a></li>
<li><a title="Afficher la 2ème diapo" href="#sl_i2">Diapo 2</a></li>
<li><a title="Afficher la 3ème diapo" href="#sl_i3">Diapo 3</a></li>
<li><a title="Afficher la 4ème diapo" href="#sl_i4">Diapo 4</a></li>
<li><a title="Afficher la 5ème et dernière diapo" href="#sl_i5">Diapo 5</a></li>
</ul>
</section>
<footer>
</footer>
</body>
</html>"
le code CSS :
"/ DIAPORAMA / #slideshow {position: relative; width: 1000px; height: 500px; padding: 20px; border: 1px solid #ddd; margin: 0 auto 2em; background: #FFF; / CSS3 effects / background: linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD); border-radius: 2px 2px 2px 2px; box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); }
/ effets d'ombre box-shadow sous diaporama/
slideshow:before, slideshow:after {position: absolute; display: block; bottom: 16px; z-index: -10; width: 50%; height: 20px; content: " "; background: rgba(0, 0, 0, 0.1); border-radius: 50%; box-shadow: 0 0 3px rgba(0, 0, 0, 0.4), 0 20px 10px rgba(0, 0, 0, 0.7); } slideshow:before { left: 0; transform: rotate(-4deg);} slideshow:after {right: 0; transform: rotate(4deg); }/ commandes fleche avant - après diaporama/
slideshow .commands {position: absolute; top: 45%; padding: 5px 13px; border-bottom: 0; font-size: 1.3em; color: #aaa; text-decoration: none; background-color: #eee; background-image: linear-gradient(#0002C6, #ddd); text-shadow: 0 0 1px #aaa; border-radius: 50%; box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); } bottom: 65px; left: -18px; content: attr(title); width: 50px; padding: 12px; background: #fff; font-family: Arial; font-size: 14px; text-align: center; text-shadow: 0 0 0; opacity: 0; border-radius: 12px; box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4); transition: opacity 0.7s, bottom 0.7s; } bottom: 55px; left: 13px; content: " "; width: 1px; height: 1px; border-top: 10px solid #fff; border-left: 5px solid transparent; border-right: 5px solid transparent; z-index: 100; opacity: 0; transition: opacity 0.7s, bottom 0.7s; }/ Boutons play/pause diaporama /
.play_commands { / positionnement en haut à droite/
position: absolute; top: 50px; right: 50px; z-index: 10; / dimension des icones / width: 22px; height: 22px; text-indent: -9999px; border: 0 none; / mettre opacity à 1 au lieu de 0 pour voir le bouton/ opacity: 0; / preparation de la transisition sur opacity et right/ transition: opacity 1s, right 1s; }
/ création du bouton pause avec 2 pseudo élements/
.pause:after,
.pause:before {position: absolute; display: block; content: " "; top: 0; width: 38%; height: 22px; background: #0002C6;
background: rgba(0, 2, 198, 0.5); }
/ décalage du bouton play sur la gauche/
.play {right: -70px; cursor: default; }
.pause:hover {border: 0 none; }
.play_commands:focus {outline: 0; }
slideshow:hover .pause, sl_play:target~#slideshow:hover .pause,.play_commands:focus {opacity: 1; }
.sl_command:target~#slideshow:hover .pause,
sl_pause:target~#slideshow:hover .pause {opacity: 0; }.pause:after {right: 0; }
.pause:before {left: 0; }
/ création de l'icone lecture avec des bordures/
.play {width: 1px; height: 1px; top: 50px; right: 0; /Les transparentes forment les fleches/ border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 20px solid #0002C6; border-left: 20px solid rgba(0, 2, 198, 0.5); /mettre 1 pour voir l'icone de suite sinon mettre 0/ opacity: 0; }
.play:hover,
.play:focus {border-bottom: 10px solid transparent; }
/ gestion des dimensions et débordement du conteneur /
slideshow .container {position: relative; width: 1000px; height: 500px; overflow: hidden;}/ on prévoit un petit espace gris pour la timeline /
slideshow .container:after {position: absolute; bottom: 0; left: 0; content: " "; width: 100%; height: 1px; background: #999;}/ Fonction d'animation des images du diaporama /
/1er % c'est le temps de glissement de l'image lors du changement (1%=1s), 2ème % temps d'apparition de l'image (20%=18s) en % du temps total (90s), chaque image reste donc visible 18s et le glisselement dure 0.9s /
@keyframes slider { 0%,
20%,
100% {left: 0}
21%,
40% {left: -100%}
41%,
60% {left: -200%}
61%,
80% {left: -300%}
81%,
100% {left: -400%} }
/ le conteneur des slides en largeur il fait 100% x le nombre de slide /
slideshow .slider {position: absolute; left: 0; top: 0; width: calc(100%5); height: 100%; / aligne les images horizontalement/ display: flex; / durée totale du diaporama */ animation: slider 40s infinite; }.sl_i:target~#slideshow .slider {transition: left 1s; }
.sl_command:target~#slideshow .slider {transition: opacity 1s; }
slideshow .c_slider {position: absolute; left: 0; top: 0; width: 100%*5; /* 100% * par le nombre de slide*/ height: 100%; background: url(Images/01/image1.jpg) 0 0 no-repeat, url(Images/02/image2.jpg) 1000px 0 no-repeat, url(Images/03/image3.jpg) 2000px 0 no-repeat, url(Images/04s/image4.png) 3000px 0 no-repeat, url(Images/05/image5.png) 4000px 0 no-repeat; }.sl_i:target~#slideshow .c_slider {transition: background 1s; }
/ annulation des marges sur figure /
slideshow figure {position: relative; display: inline-block; padding: 0; margin: 0; width: 100% /definit une largeur de 100% pour chaque image / }/ petit effet de vignette sur les images /
slideshow figure:after {position: absolute; display: block; content: " "; top: 0; left: 0; width: 100%; height: 100%; box-shadow: 0 0 65px rgba(0, 0, 0, 0.5) inset; }/ styles de légendes /
slideshow figcaption {position: absolute; left: 5px; right: -0; bottom: 0; padding: 30px; margin: -5px; border-top: 1px solid rgb(225, 225, 225); text-align: center; letter-spacing: 0.05em; word-spacing: 0.05em; font-family: Arial; background: #fff; background: rgba(255, 255, 255, 0.7); color: #555; text-shadow: -1px -1px 0 rgba(255, 255, 255, 0.3); }/ dots styles /
.dots_commands { position: relative; top: 32px; padding: 0; margin: 0; text-align: center; cursor: default; /Empeche le curseur de devenir une main cliquable/ }
.dots_commands li { display: inline; padding: 0; margin: 0; list-style: none; cursor: default; /Empeche le curseur de devenir une main cliquable/ }
.dots_commands a {position: relative; display: inline-block; height: 8px; width: 8px; margin: 0 5px; text-indent: -9999px; background: #fff; border-bottom: 0; border-radius: 50%; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.55) inset; z-index: 25; cursor: default; /Empeche le curseur de devenir une main cliquable/ }
.dots_commands li+li a { z-index: 10; cursor: default; /Empeche le curseur de devenir une main cliquable/ }
/ animation /
@keyframes dotser {0%,
100% {opacity: 1; left: 0; }
20% {opacity: 1; left: 0; }
21% {opacity: 0; left: 0; }
21% {opacity: 0; left: 23px; }
22% {opacity: 1; left: 23px; }
40% {opacity: 1; left: 23px; }
41% { opacity: 0; left: 23px; }
41% { opacity: 0; left: 45px; }
42% {opacity: 1; left: 45px; }
60% {opacity: 1; left: 45px; }
61% { opacity: 0; left: 45px; }
61% {opacity: 0; left: 68px; }
62% {opacity: 1; left: 68px; }
80% {opacity: 1; left: 68px; }
81% {opacity: 0; left: 68px; }
81% {opacity: 0; left: 90px; }
82% {opacity: 1; left: 90px; }
98% {opacity: 1; left: 90px; }
99% {opacity: 0; left: 90px; }
99% {opacity: 0; left: 90px; }
100% {opacity: 0; left: 0; } }
.dots_commands li:first-child a:after,
.dots_commands li:first-child a:before {position: absolute; top: 0; left: 0; content: " "; width: 8px; height: 8px; background: #0002C6; z-index: 20; border-radius: 50%; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.55) inset; cursor: default; /Empeche le curseur de devenir une main cliquable/ }
/ on anime "after" /
.dots_commands li:first-child a:after {animation: dotser 40s infinite; cursor: default; /Empeche le curseur de devenir une main cliquable/ }
/ on cache "before", on l'utilise uniquement au clic /
.dots_commands li:first-child a:before {display: none; }
/ besoin d'un stop ! actions quand target ! /
.sl_command {display: none; }
/ stopper les animations/
.sl_command:target~#slideshow .slider,
.sl_command:target~#slideshow figure:after,
.sl_command:target~#slideshow figcaption,
.sl_command:target~#slideshow .dots_commands li:first-child a:after {animation-play-state: paused; }
/ redemarrer l'animation/
sl_play:target~#slideshow .slider, sl_play:target~#slideshow figure:after, sl_play:target~#slideshow figcaption, sl_play:target~#slideshow .dots_commands li:first-child a:after {animation-play-state: running; }/ switch entre ls 2 animations/
.sl_command:target~#slideshow .pause {opacity: 0; }
.sl_command:target~#slideshow .play { opacity: 1; right: 50px; cursor: pointer; }
sl_play:target~#slideshow .pause { opacity: 0; } sl_play:target~#slideshow .play {opacity: 0; right: 80px; cursor: default; }/ on cache le slider /
.sl_i:target~#slideshow .slider {visibility: hidden }
.sl_i:target~#slideshow .slider figcaption {visibility: hidden }
/ on cache la 1ère pastille/
.sl_i:target~#slideshow .dots_commands li:first-child a:after {display: none; }
/ on affiche la 2ème pastille/
.sl_i:target~#slideshow .dots_commands li:first-child a:before {display: block; }
/ lorsque on cible le premier slider /
/ on cache tous les "précédent" et "suivant" /
/ on affiche seulement les deux flèches /
sl_i1:target~#slideshow .commands1 {display: block; }/ correspond au décalage des images chaque image fait 1000px de large/
sl_i1:target~#slideshow .c_slider {background-position: 0 0, 1000px 0, 2000px 0, 3000px 0, 4000px 0; }/ on place la pastille tout à gauche /
sl_i1:target~#slideshow .dots_commands li:first-child a:before {left: 0; }/ même procédé lorsqu'on cible la deuxième slide /
sl_i2:target~#slideshow .commands {display: none; } sl_i2:target~#slideshow .commands2 {display: block; } sl_i2:target~#slideshow .c_slider {background-position: -1000px 0, 0 0, 1000px 0, 2000px 0, 3000px 0; } sl_i2:target~#slideshow .dots_commands li:first-child a:before {left: 23px; }/ même procédé lorsqu'on cible la troisième slide /
sl_i3:target~#slideshow .commands {display: none; } sl_i3:target~#slideshow .commands3 {display: block; } sl_i3:target~#slideshow .c_slider {background-position: -2000px 0, -1000px 0, 0 0, 1000px 0, 2000px 0; } sl_i3:target~#slideshow .dots_commands li:first-child a:before {left: 45px; }/ même procédé lorsqu'on cible la quatrième slide /
sl_i4:target~#slideshow .commands {display: none; } sl_i4:target~#slideshow .commands4 {display: block; } sl_i4:target~#slideshow .c_slider {background-position: -3000px 0, -2000px 0, -1000px 0, 0 0, 1000px 0; } sl_i4:target~#slideshow .dots_commands li:first-child a:before {left: 68px; }/ même procédé lorsqu'on cible la cinquième slide /
sl_i5:target~#slideshow .commands {display: none; } sl_i5:target~#slideshow .commands5 {display: block; } sl_i5:target~#slideshow .c_slider {background-position: -4000px 0, -3000px 0, -2000px 0, -1000px 0, 0 0; } sl_i5:target~#slideshow .dots_commands li:first-child a:before {left: 90px; }"Ce que je veux
Je souhaite donc que mon diaporama se deroule (ce qu'il fait) mais que les <Li> (petits points sous le diapo ne soient pas cliquables, ils doivent être là juste pour savoir où l'on en est dans le diapo et ça c'est le 1er point pour lequel je n'y arrive pas....
Et le second point c'est quand je clique sur mes flèches pour avancer ou faire reculer le diaporama, mes images n'apparaissent pas, j'ai le rectangle du slide blanc et ça n'avance ou ne recule pas le diapo.
Dernier point quand je clique sur le bouron "pause" et que je reprends la "lecture" les <li> n'avancent plus en même temps que mes slides il y a un decalage.
Je m'excuse par avance de la longueur de mes codes, que j'ai raccourci pourtant au maximum je pense.
Tout amelioration et tout critique constructive est la bienvenue.
MERCI !!!