Artibo.com
Wygraj Kolekcję
Wystarczy, że wypełnisz i odpowiesz na pytanie:
Albumów Ślubnych

Dlaczego w erze cyfrowych zdjęć warto zachować wspomnienia ze ślubu w formie albumu?
Odpowiedz na pytanie konkursowe i wygraj Zestaw personalizowanych i ekskluzywnych Albumów Ślubnych:

Fotoalbum 30x30cm, max. ilości opcji oraz dwa Fotoalbumy 25x25cm, max. ilości opcji.
Co:
Kiedy:
III edycja konkursu trwa: od 01.09.2023 do 15.10.2023,
a rozstrzygnięcie konkursu do 31 października 2023 r.
Więcej:
Wszystkie dodatkowe informacje znajdziesz
w Regulaminie konkursowym TUTAJ.
Nagroda
To jest placeholder.
Przejdź do trybu Podglądu lub opublikuj stronę,
aby sprawdzić działanie swojego kodu. Kliknij dwa razy, aby edytować
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Slider</title> <style> * { margin: 0; } header { width: 100%; height: 100%; position: relative; } img.slider { position: relative; width: 100%; height: auto; top: 0; left: 0; } </style> </head> <body> <header> <img class="slider" src="https://multimedia.gr.cyfrowafoto.com/cyfrowa-B/photos/81584520-3acb-498d-876a-d7249bff159d.jpg" alt="album ślubny"> <div class="arrows"> <span id="one"></span> <span id="two"></span> </div> </header> <script> // 1. Klawisz <- (stzałka w lewo) przesuwa w lewo (cofa) slider // 2. Klawisz -> (stzałka w lewo) przesuwa w prawo slider (do przod, czyli tak jak przy funkcji changeSlide) // 3. (strzałki) wstrzymuje setInterval, a po zmianie slajdu uruchamiają go ponownie (czas ma się liczyć ponownie) const slideList = [{ img: "https://multimedia.gr.cyfrowafoto.com/cyfrowa-B/photos/8e3739f3-9a46-43e2-bfdc-d46c81873d3c.jpg", }, { img: "https://multimedia.gr.cyfrowafoto.com/cyfrowa-B/photos/07b15466-b3a9-494f-9a7d-74482aa69bce.jpg", }, { img: "https://multimedia.gr.cyfrowafoto.com/cyfrowa-B/photos/105842f8-8dc3-4521-9659-31e9ab4df017.jpg", }, { img: "https://multimedia.gr.cyfrowafoto.com/cyfrowa-B/photos/ba1bea79-160c-4df3-b8ef-a7df54e79382.jpg", }, { img: "https://multimedia.gr.cyfrowafoto.com/cyfrowa-B/photos/e97820bc-8659-4b88-a844-b77adc9c7203.jpg", }, { img: "https://multimedia.gr.cyfrowafoto.com/cyfrowa-B/photos/f5be6e7a-ebd5-4ffc-8216-b7a668a3f2be.jpg", }]; const image = document.querySelector('img.slider'); const h1 = document.querySelector('h1.slider'); // const arrow_left = [...document.getElementById('.dots span')] // Interfejs const time = 3000; let active = 0; // Implementacje const changeSlide = () => { active++; if (active === slideList.length) { active = 0; } image.src = slideList[active].img; } let indexInterval = setInterval(changeSlide, time) // Klawisze const keyChangeSlide = (e) => { console.log(e.keyCode); if (e.keyCode == 37 || e.keyCode == 39) { clearInterval(indexInterval) e.keyCode == 37 ? active-- : active++; if (active === slideList.length) { active = 0; } else if (active < 0) { active = slideList.length - 1; } image.src = slideList[active].img; indexInterval = setInterval(changeSlide, time) } } window.addEventListener('keydown', keyChangeSlide) </script> </body> </html>
artibo.com/pl   |   e-mail: info@artibo.com