Budowa prostego slideshow (pokazu slajdów)
Tym razem pokaże wam jak zbudować bardzo prosty slideshow (pokazu slajdów), który później będziecie mogli rozbudować o dodatkowe efekty. Slideshow zbuduję z pomocą HTML, CSS i JavaScript.
Budowę podzielę na 3 etapy. 1 – budowę struktury (HTML), 2 – wygląd (CSS), 3 – działanie (JS).
Jak nie trudno się domyśleć na sam początek potrzebujemy wiedzieć co chcemy umieścić w pokazie slajdów. Ja zdecydowałam się na tekst, jednak spokojnie można go zastąpić jakąś grafiką (trzeba jedynie trochę zmodyfikować kod).
Mój kod HTML wygląda następująco:
<div class="container">
<div class="slideshow-container">
<div class="mySlides">
<p>Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa,</p> <p>Quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo.</p>
</div>
<div class="mySlides">
<p>At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestia</p> <p>Quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo.</p>
</div>
<div class="mySlides">
<p>Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa,</p> <p>Quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo.</p>
</div>
<div class="mySlides">
<p>Qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, quis nostrum exercitationem</p> <p>Quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo.</p>
</div>
<a class="prev" >W ramach wyjaśnienia:
<div class="container"> – kontener ograniczający rozmiary pokazu slajdów bez niego będzie na pełną szerokość strony<div class="slideshow-container"> – kontener slidera<div class="mySlides"> – pojedynczy slide, w nim umieszczamy treść, którą chcemy wyświetlaćSkoro mamy już elementy, które chcemy wyświetlić to teraz pora na nawigację. W tym przykładzie przygotowałam dwa rodzaje nawigacji. Mamy wiec przejście:
Poprzedni, następny:
<a class="prev" >Kropki nawigacyjne:
<div class="dot-container">
<span class="dot" >W moim przykładzie są 4 slajdy więc są też 4 kropki. I jak widać został do nich dodany kod JS, przyda nam się on w kolejnych krokach. Funkcja „onclick” ma bowiem za zadanie wykrycie kliknięcia.
Do ustawienia pozycji elementów użyjemy CSS.
/* ogranicznik szerokości strony */.container{
max-width:900px;
margin:0 auto;
color:#0D0D0D;
font-size:18px;
}
/* kontener z pokazem slidów (slider) */.slideshow-container {
position: relative;
background: #F2EFE9;
}
/* Slajdy */.mySlides {
display: none;
padding: 80px;
text-align: center;
}
/* Przyciski poprzedni i następny */.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -30px;
padding: 16px;
color: #888;
font-weight: bold;
font-size: 20px;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* pozycja "next button" na prawo*/.next {
position: absolute;
right: 0;
border-radius: 3px 0 0 3px;
}
/* zmiana kolorów przycisków poprzedni i następny po najechaniu kursorem myszy */.prev:hover, .next:hover {
background-color: #A5A68A;
color: white;
}
/* kontener z kropkami */.dot-container {
text-align: center;
padding: 10px;
background: #72735D;
}
/* dodawanie nowej kuli, kropki */.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #F2EFE9;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
/* zmiana koloru kropki */.active, .dot:hover {
background-color: #A5A68A;
}Powyżej w kodzie napisałam co mniej więcej robi dany element kodu. Teraz nasz pokaz slajdów jeszcze może i nie działa, ale jakoś wygląda.
Teraz zajmiemy się uruchamianiem naszego pokazu slajdów. Użyjemy do tego czystego kodu JS (JavaScript).
var slideIndex = 1;
showSlides(slideIndex);
/* uruchamiana przez przyciski poprzedni, następny */function plusSlides(n) {
showSlides(slideIndex += n);
}
/* uruchamiany przez kropki pod sliserem */function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}Jak z pewnością już zauważyliście nasz slider ma 2 metody przechodzenia pomiędzy slajdami. Pierwszy to „poprzedni, następny” i drugi to kulki/kropki nawigacyjne. Pierwszy z nich działa dosłownie jak napisałam a drugi umożliwia na przejście do kolejnego dowolnego slidu. Obie funkcje uruchamiane są po kliknięciu.
źródło:
https://www.w3schools.com/howto/howto_js_quotes_slideshow.asp
Jak w przypadku wielu różnych tematów tak i w przypadku marki osobistej pojawiło się przez…
Choć zabrzmi to może nieco dziwnie to wprowadzenie AI (sztucznej inteligencji) do naszego życia było…
Widmo Brockenu to dość rzadko spotykane zjawisko optyczne, najczęściej widywane w wysokich partiach gór. Można…
Zacznę może od tego, że relikwia, relikwii nie równa. Wiem jeśli nie ma się pojęcia…
Logo stanowi jeden z ważniejszych elementów tożsamości wizualnej praktycznie każdej firmy, marki czy projektu. Logo…
Budując własną markę osobistą lub chcąc ją zbudować trzeba liczyć się z wieloma wyzwaniami. Jednym…