Ce diaporama est prévu pour 9 images de 486 pixels  par 286 px.

Voilà comment je procède:
-Insérer les images dans un article avec le bouton "insérer image" de l'éditeur d'article. Si elles ne sont pas aux mêmes dimensions, les redimensionner dans l'éditeur ( en conservant le même rapport largeur/hauteur sinon, elles seront déformées).
-Passer par le bouton <> code source de l'éditeur d'article et copier dans la source le code donné ci dessous.
-Toujours dans l'éditeur article coté codesource, récupérer l'adresse des images insérées pour remplacer l'adresse de mes images en rouge ci dessous par l'adresse des vôtres.
-Par la suite, en enregistrant la page code source, repasser coté normal de l'éditeur, vérifier le fonctionnement du diaporama et supprimer les images insérées hors diapo.

<!--DEBUT HTML DIAPORAMA 9-->

<div id="css3-slider">

<ul>

<li><input id="s1" checked="checked" name="num" type="radio" /> <label for="s1">1</label> <a href="/"> <img src="http://ekladata.com/hor3pKneySR4A3TSgZKxmn2C0I0.jpg" alt="Tabby brun" /> </a></li>

<li><input id="s2" name="num" type="radio" /> <label for="s2">2</label> <a href="/"> <img src="http://ekladata.com/TGuYhPN8XnaBNwC8e2K8_3hQDhg.jpg" alt="Pigeon" /> </a></li>

<li><input id="s3" name="num" type="radio" /> <label for="s3">3</label> <a href="/"> <img src="http://ekladata.com/a_Ap6MB27A_vlnYYnOqMC6EsyiQ.jpg" alt="&Eacute;cureuil" /> </a></li>

<li><input id="s4" name="num" type="radio" /> <label for="s4">4</label> <a href="/"> <img src="http://ekladata.com/QuoWOqbdLN8NZKJGW4a13LuRpPA.jpg" alt="titre image4" /> </a></li>

<li><input id="s5" name="num" type="radio" /> <label for="s5">5</label> <a href="/"> <img
src="http://ekladata.com/oOcb7gcY0uzS-Q307aVNdiPJETc.jpg" alt="titre image5" /> </a></li>

<li><input id="s6" name="num" type="radio" /> <label for="s6">6</label> <a href="/"> <img src="http://ekladata.com/zBW8zms6Ax_I0Zcp40Sw7qCk1NA.jpg" alt="titre image6" /> </a></li>

<li><input id="s7" name="num" type="radio" /> <label for="s7">7</label> <a href="/"> <img src="http://ekladata.com/hor3pKneySR4A3TSgZKxmn2C0I0.jpg" alt="titre image7" /> </a></li>

<li><input id="s8" name="num" type="radio" /> <label for="s8">8</label> <a href="/"> <img src="http://ekladata.com/QQVu3dWY_NS21iWwVWEm0EnTLEI@600x200.jpg" alt="titre image8" /> </a></li>

<li><input id="s9" name="num" type="radio" /> <label for="s9">9</label> <a href="/"> <img
src="http://ekladata.com/Oj-_QJh0hwc7NDtC2J2jAXOj5o4.jpg" alt="Titre image 9" /> </a></li>

</ul>

</div>

<style><!--

/****************** CODE CSS*******************/

#css3-slider {

  margin:30px auto;

  padding:0px 0px;

  width:448px;

  height:286px;

  position:relative;

}

#css3-slider li {

  list-style:none;

  margin:0px 0px;

  padding:0px 0px;

}

#css3-slider li input + label {

  position:absolute;

  bottom:0px;

  left:10px;

  z-index:100;

  font:bold 11px/16px Arial,Sans-Serif;

  background-color:black;

  color:white;

  padding:0px 0px;

  width:16px;

 border-radius: 8px;

  text-align:center;

  cursor:pointer;

}

#css3-slider li:nth-child(1) label {left:28px; }

#css3-slider li:nth-child(2) label {left:46px; }

#css3-slider li:nth-child(3) label {left:64px; }

#css3-slider li:nth-child(4) label {left:82px; }

#css3-slider li:nth-child(5) label {left:100px; }

#css3-slider li:nth-child(6) label {left:118px;}

#css3-slider li:nth-child(7) label {left:136px;}

#css3-slider li:nth-child(8) label {left:154px;}

#css3-slider li:nth-child(9) label {left:172px;}

#css3-slider li img {

 border: 10px ridge gray;

  outline:none;

  position:absolute;

  top:50%;

  left:50%;

  width:0px;

  height:0px;

  visibility:hidden;

  opacity:0;

  -webkit-transition:all 2s ease-in-out;

  -moz-transition:all 2s ease-in-out;

  -ms-transition:all 2s ease-in-out;

  -o-transition:all 2s ease-in-out;

  transition:all 2s ease-in-out;

  -webkit-transform:rotate(0deg) scale(0);

  -moz-transform:rotate(0deg) scale(0);

  -ms-transform:rotate(0deg) scale(0);

  -o-transform:rotate(0deg) scale(0);

  transform:rotate(0deg) scale(0);

}

#css3-slider a {

  text-decoration:none !important;

}

#css3-slider li a span {

  cursor:default;

  display:block;

  position:absolute;

  right:0px;

  bottom:0px;

  left:0px;

  background-color:rgba(0,0,0,0.8);

  font:normal 11px/26px Arial,Sans-Serif;

  color:white;

  padding:0px 10px;

  text-align:right;

  opacity:0;

  viibility:hidden;

  -webkit-transition:all 2s ease-in-out;

  -moz-transition:all 2s ease-in-out;

  -ms-transition:all 2s ease-in-out;

  -o-transition:all 2s ease-in-out;

  transition:all 2s ease-in-out;

}

#css3-slider li input:checked + label {

  background-color:white;

  color:black;

 box-shadow: 

        -1px 2px 5px 1px rgba(0, 0, 0, 0.7),                      

        -1px 2px 20px yellow inset;

}

#css3-slider li input:checked ~ img,

#css3-slider li input:checked ~ a img {

  top:0%;

  left:0%;

  width:448px;

  height:286px;

  visibility:visible;

  -webkit-transform:rotate(720deg) scale(1);

  -moz-transform:rotate(720deg) scale(1);

  -ms-transform:rotate(720deg) scale(1);

  -o-transform:rotate(720deg) scale(1);

  transform:rotate(720deg) scale(1);

  opacity:1;

  z-index:99;

}

#css3-slider li input:checked ~ a span {

  opacity:1;

  z-index:100;

}

#css3-slider input {

 display:none;}

--></style>

<!-- FIN DIAPORAMA 9-->