Un article de Wikipèdia, l'enciclopèdia liura.
<head>
<title>Glissière d'image</title>
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-family: "Helvetica", sans-serif;
}
img {
max-width: 100%;
}
.slider-container {
height: 100%;
width: 100%;
position: relative;
overflow: hidden;
text-align: center;
}
.menu {
position: absolute;
left: 0;
z-index: 900;
width: 100%;
bottom: 0;
}
.menu label {
cursor: pointer;
display: inline-block;
width: 16px;
height: 16px;
background: #fff;
border-radius: 50px;
margin: 0 0.2em 1em;
}
.menu label:hover,
.menu label:focus {
background: #1c87c9;
}
.slide {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 100%;
z-index: 10;
padding: 8em 1em 0;
background-size: cover;
background-position: 50% 50%;
transition: left 0s 0.75s;
}
[id^="slide"]:checked + .slide {
left: 0;
z-index: 100;
transition: left 0.65s ease-out;
}
.slide-1 {
background-image: url("/uploads/media/default/0001/03/5bfad15a7fd24d448a48605baf52655a5bbe5a71.jpeg");
}
.slide-2 {
background-image: url("/uploads/media/default/0001/03/66cf5094908491e69d8187bcf934050a4800b37f.jpeg");
}
.slide-3 {
background-image: url("/uploads/media/default/0001/03/b87b29b6ca67b64b76651037dc16f5a46e73b42a.jpeg");
}
</style>
</head>
<body>
<input id="slide-dot-1" type="radio" name="slides" checked />
<input id="slide-dot-2" type="radio" name="slides" />
<input id="slide-dot-3" type="radio" name="slides" />
