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.
Co nam będzie potrzebne do budowy slidera na stronie?
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ć.
Jakie biblioteki będą nam potrzebne do budowy slidera – galerii?
W ekspozycji, którą utworzymy wykorzystamy kilka różnych bibliotek takich jak:
- jquery.min.js – jest to biblioteka JS, która umożliwi nam wykonanie animacji,
- font awesome – biblioteka ta zawiera wiele ciekawych kształtów, symboli,
- dodatkowo dodałam także Google Font – Open Sans (wy możecie użyć innego fontu lub użyć domyślnego dla waszej strony).
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.
Budujemy prosty slider / galerię
Dodajemy potrzebne biblioteki JS
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>Struktura galerii w HTML
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 tekstBez tekstu – czyli kiedy go nie chcemy dodać
Jeś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.
Dodawanie obrazu, grafiki
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ładowa struktura HTML
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>Struktura CSS
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.
Struktura kodu slidera w jQuery
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;
}Gotowy slider – galeria w codepen
W branży IT jestem już od 2007 roku. W tym czasie zajmowałam się głównie tematyką pozycjonowania i budowy stron internetowych. Hobbistycznie zajmuje się fotografią, podróżami (głównie tymi mikro). Interesuje się mitologią (Nordycką, Grecką i Rzymską) i historią.