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 data-popis="Veľmi pekné obrázky"></div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.carousel { --sirka: 40em; --vyska: 25em; --hrubka-ramika: 1px; --cas-prelinania: 3s; --pocet-obrazkov: 4; --obrazok-1: url("https://farm6.staticflickr.com/5591/15008867125_b61960af01_h.jpg"); --obrazok-2: url("https://farm4.staticflickr.com/3902/14985871946_24f47d4b53_h.jpg"); --obrazok-3: url("https://farm6.staticflickr.com/5584/14985868676_b51baa4071_h.jpg"); --obrazok-4: url("https://farm4.staticflickr.com/3920/15008465772_d50c8f0531_h.jpg"); position: relative; width: var(--sirka); height: var(--vyska); border: var(--hrubka-ramika, 0) solid gray; background-size: 100% 100%; animation: animacia calc(var(--cas-prelinania) * var(--pocet-obrazkov)) infinite; } @keyframes animacia { 0% {background-image: var(--obrazok-1)} 25% {background-image: var(--obrazok-2)} 50% {background-image: var(--obrazok-3)} 75% {background-image: var(--obrazok-4)} 100% {background-image: var(--obrazok-1)} } .carousel::after { content: attr(data-popis); position: absolute; bottom: 0; width: var(--sirka); line-height: 3em; box-sizing: border-box; background: rgba(0,0,0,.5); font-family: sans-serif; text-align: center; color: #fff; }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>