Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<div class="carousel"> <input id="slide-1" name="carousel" type="radio" value="1" checked> <input id="slide-2" name="carousel" type="radio" value="2"> <input id="slide-3" name="carousel" type="radio" value="3"> <ul class="carousel-list"> <li><img src="http://lorempixel.com/600/300/0" alt="obrázek 1"></li> <li><img src="http://lorempixel.com/600/300/0/0" alt="obrázek 2"></li> <li><img src="http://lorempixel.com/600/300/0/0/0" alt="obrázek 3"></li> </ul> <label for="slide-1" id="slide-1"></label> <label for="slide-2" id="slide-2"></label> <label for="slide-3" id="slide-3"></label> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.carousel { /* šířka obrázků */ max-width: 600px; padding: 5px; overflow: hidden; border: 1px solid #ccc; margin: auto; /* centrování labelů - atrap pro inputy */ text-align: center; } .carousel-list, .carousel-list li { padding: 0; margin: 0; } .carousel-list { white-space: nowrap; transition: transform .3s; } .carousel-list li { display: inline-block; width: 100%; } .carousel-list img { max-width: 100%; height: auto; margin: 0; } /* atrapa pro checkbox */ .carousel label { cursor: pointer; display: inline-block; /* fallback pro starší prohlížeče */ background-color: gray; background-color: rgba(128,128,128, 0.6); border-radius: 50%; width: 15px; height: 15px; margin: 20px 10px; } /* skrytí checkboxu */ .carousel input { display: none; } input#slide-1:checked ~ label#slide-1, input#slide-2:checked ~ label#slide-2, input#slide-3:checked ~ label#slide-3 { /* fallback pro starší prohlížeče */ background: brown; background-color: rgba(128,0,0, 0.8) } input:nth-child(1):checked ~ ul { transform: translateX(0); } input:nth-child(2):checked ~ ul { transform: translateX(-100%); } input:nth-child(3):checked ~ ul { transform: translateX(-200%); } .carousel-list li { opacity: .1; transition: all .4s; transform: scale(.1); } input:nth-child(1):checked ~ ul li:nth-child(1), input:nth-child(2):checked ~ ul li:nth-child(2), input:nth-child(3):checked ~ ul li:nth-child(3) { opacity: 1; transform: scale(1); }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>