• Montage 116

    Montage sans doute déjà proposé et que vous retrouvez sur des sites de montages standards.

    Clic sur chaque bouton.

    <div style="position: relative; overflow: hidden; width: 60vw; height: 33.75vw; border: 0.6vh ridge white; margin: 1vh auto; text-align: left;"><input id="tr1" class="tr" type="text" /><input id="tr2" class="tr" type="text" /><input id="tr3" class="tr" type="text" /><input id="tr4" class="tr" type="text" /><input id="tr5" class="tr" type="text" /><input id="tr6" class="tr" type="text" /><input id="tr7" class="tr" type="text" /><input id="tr8" class="tr" type="text" /><input id="tr9" class="tr" type="text" />
    <p id="bc"><img class="mg" src="http://ekladata.com/Oe8_a6N5BwPkphemH1jcwPfq_1U.jpg" alt="" /><img class="mg" src="http://ekladata.com/07D6fXZagBmv-ygap2k8eZ5VOig.jpg" alt="" /><img class="mg" src="http://ekladata.com/JOivzJkCz-jp59L7JM8_EE_k-mE.jpg" alt="" /><img class="mg" src="http://ekladata.com/MW2h2HurHC5K4H7F4IQnljFalDk.jpg" alt="" /><img class="mg" src="http://ekladata.com/0rNX5Xwk2MeaCu4lEhQCZooUZ30.jpg" alt="" /><img class="mg" src="http://ekladata.com/alvHzmCRM1UcWQ3K7x589XML7XY.jpg" alt="" /><img class="mg" src="http://ekladata.com/pI_zdT1rj3eJYdJnpVi-0689pMQ.jpg" alt="" /><img class="mg" src="http://ekladata.com/IgYnP-YgA-Ii5hRipiUYVoT2Rm8.jpg" alt="" /><img class="mg" src="http://ekladata.com/KrnOE3unG_HWK-BmejCkf5kr2lU.jpg" alt="" /></p>
    </div>

    <style><!--
    .tr{position:absolute; z-index:3; width:2vw; height:2vw; border-radius:50%; border:0.1vh solid black; background:pink; box-shadow:inset 0.4vh 0.4vh 0.6vh black, inset -0.4vh -0.4vh 0.6vh white;}
    #tr1{transform:translate(15vw,31vw);}
    #tr2{transform:translate(18vw,31vw);}
    #tr3{transform:translate(21vw,31vw);}
    #tr4{transform:translate(24vw,31vw);}
    #tr5{transform:translate(27vw,31vw);}
    #tr6{transform:translate(30vw,31vw);}
    #tr7{transform:translate(33vw,31vw);}
    #tr8{transform:translate(36vw,31vw);}
    #tr9{transform:translate(39vw,31vw); background:lime;}
    .tr:focus{background:red;}
    #bc{position:absolute; z-index:1; width:540vw; height:33.75vw; display:inline-block; transition:all 1s linear;}
    .mg{width:60vw; height:33.75vw;}
    #tr1:focus ~ #bc{transform:translate(-60vw,0vw);}
    #tr2:focus ~ #bc{transform:translate(-120vw,0vw);}
    #tr3:focus ~ #bc{transform:translate(-180vw,0vw);}
    #tr4:focus ~ #bc{transform:translate(-240vw,0vw);}
    #tr5:focus ~ #bc{transform:translate(-300vw,0vw);}
    #tr6:focus ~ #bc{transform:translate(-360vw,0vw);}
    #tr7:focus ~ #bc{transform:translate(-420vw,0vw);}
    #tr8:focus ~ #bc{transform:translate(-480vw,0vw);}
    #tr9:focus ~ #bc{transform:translate(0vw,0vw);}
    --></style>

    Le montage est dimensionné en adaptatif en 60vw/33.75vw, ce qui correspond sur votre écran à 1152pw par 648px, largeur zone article courante.

    Les boutons sont dimensionnés en rond de 2vw/2vw; vous pouvez modifier cette taille et cette forme.

    Les images sont dimensionnées en 60vw/33.75vw (1152x648px).

    La largeur du contenant des images (id="bc") est fonction du nombre d'images: ici, 9 images de 60vw de large= 9x60vw=540vw.

    Si vous modifiez ce nombre, il vous faudra modifier cette valeur et les valeurs de translation au clic.

    Ne pas laisser un espace entre les adresses des images car sinon, un vide décalera l'animation.

    Chaque clic déplace le contenant bc de 60vw vers la gauche.

    A chaque bouton correspond une position du contenant bc.

    L'animation peut être faite de haut en bas, par exemple: voir pas 116b.