Prosta galeria slider
Dziś pokażę wam jak w prosty sposób zbudować ciekawy slider – galerię (baner) zdjęć składającą się z 5 zdjęć. Zdjęcia będą zaś pokazywać się po kliknięciu w przycisk – czyli interakcji z użytkownikiem.
Na początek będziemy potrzebowali oczywiście tych 5 różnych zdjęć (grafik) oraz jak zwykle edytora kodu (spokojnie wystarczy prosty jak Notepad++) będzie on nam potrzebny do pisania kodu. Jeśli budujecie taką galerię pierwszy raz to warto testowo najpierw ją sobie przygotować w osobnym pliku a dopiero później dodać na stronę internetową. Tak by sobie go najpierw przetestować.
W ekspozycji, którą utworzymy wykorzystamy kilka różnych bibliotek takich jak:
Jeśli już wcześniej dodaliście te pliki to nie musicie tego robić ponownie (staramy się nie dublować plików w witrynach internetowych). Chyba, że coś nie działa – np. wersje jQuery mogą się między sobą różnić. Chociaż to tak prosty kod, że nie powinno być z nim problemów.
Pracę warto zacząć od instalacji potrzebnych nam bibliotek. Oczywiście jeśli zajdzie potrzeba można je później zmienić lub dodać kolejne.
Na początek w sekcji <head> umieszczamy linki do biblioteki font awesome (poniżej przykład). Pamiętaj by dostosować je do swoich potrzeb. W moim kodzie pliki CSS i JS znajdują się w tym samym katalogu co plik z kodem strony, pamiętaj więc by dostosować lokalizację skryptów pod siebie. W przeciwnym wypadku kod nie zadziała.
Najpierw dodamy biblioteki CSS:
<link rel="stylesheet" href="all.min.css">
<link rel="stylesheet" href="fork-awesome.min.css">Teraz pora na JS:
<script src="jquery.min.js"></script>Zaczniemy może budowę od najprostszej rzeczy czyli struktury HTML. Nie podam wam tutaj jednak struktury całej strony a jedynie samej galerii. Brakujący kod znajdziecie -> Struktura strony w HTML5
Zasadniczo podstawa kodu będzie wyglądać następująco:
<div class="conteiner">
<div class="element" style="background-image:url();">
<div class="text"><i class="fa-solid fa-hand-pointer"></i><div class="in"><p>Some text</p></div></div>
</div>Jak widać w kodzie mamy kontener okalający a w nim jedynie „jeden element” (kontener z klasą element). Domyślnie miało ich być 5 jednak tu je pominęłam by kod był bardziej czytelny. We wnętrzu elementu umieszczone zostały kolejne kontenery, każdy z nich pełni jakąś funkcję obiektu.
<div class="text"></div> // kontener spinający na tekst i ikonę
<i class="fa-solid fa-hand-pointer"></i> // ikona, mała grafika
<div class="in"><p></p></div> // kontener na tekstJeśli nie chcecie mieć w galerii tekstu możecie z kodu usunąć element. Reszta powinna zostać by swobodnie móc poruszać się pomiędzy obrazami!
<div class="in"><p></p></div>Łapka / ikona w tym przypadku jest niezbędna by nasza wystawa działała. Oczywiście nie oznacza to jednak że musicie wybrać taką samą ikonę jak ja. Możecie ją wymienić na inna z biblioteki.
Sam element jak widać na powyżej posiada przypisane style a konkretnie właściwość background-image:url(). Służy ona do dodawania grafiki w formie tła. Jak nietrudno się domyślić w tym miejscu możemy umieścić link do obrazków, które chcemy wyświetlać w galerii.
<div class="element" style="background-image:url();"></div>Przykładowo wiec po złożeniu kodu może to wyglądać tak:
<div class="conteiner">
<div class="element" style="background-image:url(img/plum-7040627_960_720.jpg);">
<div class="text"><i class="fa-solid fa-hand-pointer"></i><div class="in"><p>Some text</p></div></div>
</div>
<div class="element" style="background-image:url(img/seljalandsfoss-1207958_960_720.jpg);">
<div class="text"><i class="fa-solid fa-hand-pointer"></i> <div class="in"><p>Some text</p></div></div>
</div>
<div class="element" style="background-image:url(img/butterfly-6964083_960_720.jpg);">
<div class="text"><i class="fa-solid fa-hand-pointer"></i><div class="in"><p>Sed ut perspiciatis, unde omnis iste natus error sit voluptatem</p></div></div>
</div>
<div class="element" style="background-image:url(img/flower-7043267_960_720.jpg);">
<div class="text"><i class="fa-solid fa-hand-pointer"></i><div class="in"><p>Sed ut perspiciatis</p></div></div>
</div>
<div class="element active" style="background-image:url(img/river-7047522_960_720.jpg);">
<div class="text"><i class="fa-solid fa-hand-pointer"></i><div class="in"><p>Sed ut perspiciatis</p></div></div>
</div>
</div>Na początek ustawimy sobie wymiary (rozmiary) naszych elementów. Wyśrodkujemy więc kontener, oraz zadbamy o to by nasze obrazki mogły być obok siebie.
.conteiner{
max-width:750px;
margin:0 auto;
height: 400px;
font-size:14px;
}
.conteiner .element{
height:100%;
background-size: cover;
background-repeat: no-repeat;
width: 10%;
float: left;
border-radius: 40px;
margin: 5px;
position:relative;
transition-duration:1s;
}Teraz zajmiemy się sekcją z przyciskiem (ikoną) i tekstem. Odpowiada za nią kod CSS:
.conteiner .element .text{
position:absolute;
bottom: 14px;
width: 100%;
}
.conteiner .element .text i.fa-solid{
background: #fff;
padding: 12px;
font-size: 30px;
border-radius: 50%;
margin: 0 auto;
display: block;
width: 34px;
height: 34px;
border: 5px solid #ccc;
}Reszta kodu CSS ma za zadanie zadbać o wygląd oraz położenie elementów.
Kod, który sprawi że nasz slider zacznie działać jest stosunkowo prosty. W praktyce opiera się jedynie na dodaj usuń klasę z elementu. W kodzie korzystamy z zmiennej „.parent” dzięki czemu odwołujemy się bezpośrednio do rodzica elementu, który pełnie rolę przełącznika. U nas jest to symbolicznie ikonka łapki (dłoń) – ponieważ tak naprawdę to jej kontener jest bezpośrednim potop. W praktyce oczywiście mógł by być to inny element pod warunkiem, że jego rodzic (element nadrzędny będzie miał klasę .element).
$(".text").click(function(){
$( ".element" ).removeClass( "active" )
$(this).parent( ".element" ).addClass('active');;
});Nasz aktywny element (rozwinięty) powinien więc posiadać klasę „active”
.conteiner .element.active{
width:52%;
}
.conteiner .element.active .text i.fa-solid{
margin:0 7px;
}
.conteiner .element.active .text .fa-hand-pointer:before{
text-shadow:4px 4px 2px #ccc;
}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…