• Défilé au clic

    Modification de la taille d'un article publié: ici en 60vw/69vh.

    Avancement au clic

    <div style="width: 60vw; height: 69vh; margin: 2vh auto; border: 0.5vh ridge white; overflow: hidden;"><input id="b0" class="bton" type="text" /> <input id="b1" class="bton" type="text" /> <input id="b2" class="bton" type="text" /> <input id="b3" class="bton" type="text" /> <input id="b4" class="bton" type="text" /> <input id="b5" class="bton" type="text" /> <input id="b6" class="bton" type="text" /> <input id="b7" class="bton" type="text" /> <input id="b8" class="bton" type="text" /> <input id="b9" class="bton" type="text" />
    <p id="bcom">Avancement au clic</p>
    <p id="lp0"><img style="width: 60vw;" src="http://ekladata.com/jgGAriowIc1CO_m_rQ9W8nMd_Hw.jpg" alt="" /><img style="width: 60vw;" src="http://ekladata.com/BeFXK-T-OoAlVejdxobxsLE0lEM.jpg" alt="" /><img style="width: 60vw;" src="http://ekladata.com/zTcDdymwB7fRxoHECJKGrnn0n30.jpg" alt="" /><img style="width: 60vw;" src="http://ekladata.com/CN-V-cvSBESmL0EsRegPsyiOVzY.jpg" alt="" /><img style="width: 60vw;" src="http://ekladata.com/txxCnqMnHEun_h3rcHAoT2KT1fw.jpg" alt="" /><img style="width: 60vw;" src="http://ekladata.com/gTlV9GMlvkUD34suxlDNu9dV3wo.jpg" alt="" /><img style="width: 60vw;" src="http://ekladata.com/7LqU7GY9pBRoGbcv5lYhwtyNx-k.jpg" alt="" /><img style="width: 60vw;" src="http://ekladata.com/BaZ9tMgeFOe8tFMrErNfPfJebI8.jpg" alt="" /><img style="width: 60vw;" src="http://ekladata.com/zSyVg1wzEgY3gmji4fT3loFLRnE.jpg" alt="" /><img style="width: 60vw;" src="http://ekladata.com/Nl59spNldO9IVLlQ9_P6nap1LCY.jpg" alt="" /></p>
    </div>

    <style><!--
    .bton{position:absolute; width:60vw; height:69vh; background:transparent;transform:translate(0vw,0vh);}
    #bcom{position:absolute; z-index:5; width:20vw; background:rgba(0,0,0,0.5);text-align:center; font-size:4vh; color:white; text-shadow:0.1vh 0.1vh black; transform:translate(0vw,0vh);}
    #b0{position:absolute; z-index:10;}
    #b1,#b2,#b3,#b4,#b5,#b6,#b7,#b8,#b9{position:absolute; z-index:9;}

    #lp0{z-index:1; width:610vw; height:69vh; transform:translate(0vw,0vh);transition:all 1s linear;}

    #b0:focus ~ #b1{z-index:11;}
    #b1:focus ~ #b2{z-index:11;}
    #b2:focus ~ #b3{z-index:11;}
    #b3:focus ~ #b4{z-index:11;}
    #b4:focus ~ #b5{z-index:11;}
    #b5:focus ~ #b6{z-index:11;}
    #b6:focus ~ #b7{z-index:11;}
    #b7:focus ~ #b8{z-index:11;}
    #b8:focus ~ #b9{z-index:11;}
    #b0:focus ~ #lp0{transform:translate(-60vw,0vh);}
    #b1:focus ~ #lp0{transform:translate(-120vw,0vh);}
    #b2:focus ~ #lp0{transform:translate(-180vw,0vh);}
    #b3:focus ~ #lp0{transform:translate(-240vw,0vh);}
    #b4:focus ~ #lp0{transform:translate(-300vw,0vh);}
    #b5:focus ~ #lp0{transform:translate(-360vw,0vh);}
    #b6:focus ~ #lp0{transform:translate(-420vw,0vh);}
    #b7:focus ~ #lp0{transform:translate(-480vw,0vh);}
    #b8:focus ~ #lp0{transform:translate(-540vw,0vh);}
    --></style>

    Le principe est de déplacer le paragraphe, contenant les images (lp0), d'une largeur d'image à chaque clic.

    Le premier bouton (b0) est au premier plan (z-index:10;);  en cliquant dessus, on fait monter le bouton suivant (b1) au dessus (z-index:11) et ainsi de suite.

    Le clic sur chaque bouton fait avancer lp0 d'une largeur d'une image, vers la gauche.

    La taille des images est adaptée par le code, quelles que soient celles de vos images; elles sont alignées dans un paragraphe, de la largeur de x photos: pas de code compliqué.

    Le nombre d'images est à votre convenance.