Booster vos publications

CAROUSEL HTML5

Par DONALD HERBELIN, publié le jeudi 23 février 2017 09:29 - Mis à jour le mercredi 1 mars 2017 21:52

Ci-dessous un carousel html5 (SANS Javascript - compatible Android et IOS).

Dans cet exemple, il y 4 images qui défilent (stockées dans un autre article ENT) et un lien internet positionné uniquement sur la première image :

 
X

Code d'intégration du Carousel HTML5

<style type="text/css">
@keyframes slidy {  0% { left: 0%; }  20% { left: 0%; }  25% { left: -100%; }  45% { left: -100%; }  50% { left: -200%; }  70% { left: -200%; }  75% { left: -300%; }  95% { left: -300%; }  100% { left: -400%; }}
div#slider figure {  position: relative;  width: 400%;  margin: 0;  padding: 0;  font-size: 0;  left: 0;  text-align: left;  animation: 20s slidy infinite;}div#slider figure img { width: 25%; height: 500px; float: left; }
div#slider { width: 100%; max-width: 900px; overflow: hidden }
</style>
<div style="margin: auto;border:5px solid rgb(255, 255, 255); box-shadow:0px 0px 10px rgba(0, 0, 0, 0.8); height:500px; width:90%">
<div id="slider">
<figure>
<p>
<a href=" lien-internet-image1"><img alt="" src=" url-stockage-image1" /></a>
<img alt="" src=" url-stockage-image2" />
<img alt="" src=" url-stockage-image3" />
<img alt="" src=" url-stockage-image4" />
</p>
</figure>
</div>
</div>
Catégories
  • Contenu externe