• Exemple 88

    Faites glisser les images par le curseur inférieur.

    J'ai publié 2 articles avec les images regroupées en 1 seule (sprite) mais cette écriture est possible également.

    Mes images sont dimensionnées en 317px par 563px; on peu en ajouter ou en retirer.

    La première est éloignée du bord de 317px (margin-left) et la dernière du bord droit: margin-right.

    La couleur des caches semi-transparents est blanc (rgba(255,255,255,0.8) mais on peut en choisir d'autres.

     

     

    <div style="position: relative; width: 951px; height: 580px; border: 1px solid grey; margin: 5px auto; text-align: left; overflow: hidden;">
    <p style="position: absolute; z-index: 1; width: 951px; height: 580px; overflow: auto; white-space: nowrap;"><img style="margin-left: 317px;" src="http://ekladata.com/wxEdbc00ZZRQHt-MVISwk2vWV-k@317x563.jpg" alt="" /> <img src="http://ekladata.com/9cIgXNQt1a95BgFR6LETo4RHKBY@317x563.jpg" alt="" /> <img src="http://ekladata.com/RzffWlZy7HSfQpUMXZF5_8B5MV8@317x563.jpg" alt="" /> <img src="http://ekladata.com/l3uXqzPtUYMhQS5mhHjCk6YOZX0@317x563.jpg" alt="" /> <img src="http://ekladata.com/Au531_-MvCvHa9DXd84tJw9cHGw@317x563.jpg" alt="" /> <img src="http://ekladata.com/8aMRUv7hI-y4oDvh0Ac0hp5KD5U@317x563.jpg" alt="" /> <img style="margin-right: 317px;" src="http://ekladata.com/dcRcngd2PP5cbbIxM_TwhKbOU_s@317x563.jpg" alt="" /></p>
    <p style="position: absolute; z-index: 2; width: 317px; height: 563px; background: rgba(255,255,255,0.8); transform: translate(0px,0px);">&nbsp;</p>
    <p style="position: absolute; z-index: 2; width: 317px; height: 563px; background: rgba(255,255,255,0.8); transform: translate(634px,0px);">&nbsp;</p>
    </div>