Ptite_Perle
A les clefs du forum
Je tiens le trousseau de clefs du forum
Fondatrice Messages : 5862 Venue : 27/06/2009 Je suis : Age : 60 Je vie à : Lyon Humeur : Bonne humeur Mes Points : 121088 SIMPLE CSS SLIDEs | | Coucou Une simple silde HTML: - Code:
-
<div align="center"> <div class="contener_slideshow"> <div class="contener_slide"> <div class="slid_1"> <img src="Ton image" /> </div> <div class="slid_2"> <img src="Ton image" /> </div> <div class="slid_3"> <img src="Ton image" /> </div> </div> </div> </div> CSS: - Code:
-
.contener_slideshow { width:610px; height:211px; overflow: hidden; position: relative; background-image: url(http:YOUR-URL-IMAGE.png); } .slid_1, .slid_2, .slid_3 { position: absolute; width:610px; height:211px; } .slid_1{left: 0;} .slid_2{left: 610px;} .slid_3{left: 1220px;} .contener_slide { width: 1220px; height: 211px; left:0px; position: absolute; -webkit-animation-duration: 10s; -webkit-animation-iteration-count:infinite; -webkit-animation-name: anim_slide; -moz-animation-duration: 10s; -moz-animation-iteration-count:infinite; -moz-animation-name: anim_slide; -ms-animation-duration: 10s; -ms-animation-iteration-count:infinite; -ms-animation-name: anim_slide; animation-duration: 10s; animation-iteration-count:infinite; animation-name: anim_slide; } @-webkit-keyframes anim_slide { 0% {left:0px;} 22% {left:0px;} 33% {left:-610px;} 45% {left:-610px;} 66% {left:-1220px;} 90% {left:-1220px;} } @-moz-keyframes anim_slide { 0% {left:0px;} 22% {left:0px;} 33% {left:-610px;} 45% {left:-610px;} 66% {left:-1220px;} 90% {left:-1220px;} } @-ms-keyframes anim_slide { 0% {left:0px;} 22% {left:0px;} 33% {left:-610px;} 45% {left:-610px;} 66% {left:-1220px;} 90% {left:-1220px;} } @keyframes anim_slide { 0% {left:0px;} 22% {left:0px;} 33% {left:-610px;} 45% {left:-610px;} 66% {left:-1220px;} 90% {left:-1220px;} } |
| |