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
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Slider</title> <link rel="stylesheet" href="style.css" /> </head> <body> <div class="slider"> <div class="slide current"> <div class="content"> <h1>Nadpis 1</h1> <p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit hic maxime, voluptatibus labore doloremque vero! </p> </div> </div> <div class="slide"> <div class="content"> <h1>Nadpis 2</h1> <p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit hic maxime, voluptatibus labore doloremque vero! </p> </div> </div> <div class="slide"> <div class="content"> <h1>Nadpis 3</h1> <p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit hic maxime, voluptatibus labore doloremque vero! </p> </div> </div> <div class="slide"> <div class="content"> <h1>Nadpis 4</h1> <p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit hic maxime, voluptatibus labore doloremque vero! </p> </div> </div> <div class="slide"> <div class="content"> <h1>Slide Five</h1> <p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit hic maxime, voluptatibus labore doloremque vero! </p> </div> </div> <div class="slide"> <div class="content"> <h1>Nadpis 5</h1> <p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit hic maxime, voluptatibus labore doloremque vero! </p> </div> </div> </div> <script src="main.js"></script> </body> </html>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
@import url('https://fonts.googleapis.com/css?family=Roboto'); * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Roboto', sans-serif; background: #333; color: #fff; line-height: 1.6; } .slider { position: relative; overflow: hidden; height: 100vh; width: 100vw; } .slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.9s linear; } .slide.current { opacity: 1; } .slide .content { position: absolute; bottom: 70px; left: -600px; opacity: 0; width: 600px; background-color: rgba(255, 255, 255, 0.8); color: #333; padding: 35px; } .slide .content h1 { margin-bottom: 10px; } .slide.current .content { opacity: 1; transform: translateX(600px); transition: all 1.5s linear 1.0; } @media (max-width: 500px) { .slide .content { bottom: -300px; left: 0; width: 100%; } .slide.current .content { transform: translateY(-300px); } } /* Backgorund Images */ .slide:first-child { background: url('https://wallpaperboat.com/wp-content/uploads/2020/04/aesthetic-moon-wallpaper-1920x1080-4.jpg') no-repeat center top/cover; } .slide:nth-child(2) { background: url('https://wallpaperaccess.com/full/109676.jpg') no-repeat center top/cover; } .slide:nth-child(3) { background: url('https://www.w3schools.com/html/mov_bbb.mp4') no-repeat center top/cover; } .slide:nth-child(4) { background: url('https://wallpapercave.com/wp/wp3240327.jpg') no-repeat center top/cover; } .slide:nth-child(5) { background: url('https://images3.alphacoders.com/106/1069102.jpg') no-repeat center top/cover; } .slide:nth-child(6) { background: url('https://images.hdqwalls.com/download/vaporwave-zl-1920x1080.jpg') no-repeat center center/cover; }
CSS
Autoformát
CSS reset
Až na konci
const slides = document.querySelectorAll('.slide'); const next = document.querySelector('#next'); const prev = document.querySelector('#prev'); const auto = true; // Auto scroll const intervalTime = 5000; let slideInterval; const nextSlide = () => { // Get current class const current = document.querySelector('.current'); // Remove current class current.classList.remove('current'); // Check for next slide if (current.nextElementSibling) { // Add current to next sibling current.nextElementSibling.classList.add('current'); } else { // Add current to start slides[0].classList.add('current'); } setTimeout(() => current.classList.remove('current')); }; const prevSlide = () => { // Get current class const current = document.querySelector('.current'); // Remove current class current.classList.remove('current'); // Check for prev slide if (current.previousElementSibling) { // Add current to prev sibling current.previousElementSibling.classList.add('current'); } else { // Add current to last slides[slides.length - 1].classList.add('current'); } setTimeout(() => current.classList.remove('current')); }; // Auto slide if (auto) { // Run next slide at interval time slideInterval = setInterval(nextSlide, intervalTime); }
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>