Dziś pokażę wam jak w prosty sposób zrobić ciekawy slider – galerię zdjęć składającą się z 5 zdjęć, które będą pokazywać się po kliknięciu w przycisk.
Co nam będzie potrzebne do budowy slidera?
Na początek będziemy potrzebowali oczywiście tych 5 różnych zdjęć oraz jak zwykle edytora kodu (spokojnie wystarczy prosty jak Notepad++) będzie on nam potrzebny do pisania. Jeśli budujecie taką galerię pierwszy raz to warto testowo najpierw ją sobie przygotować w osobnym pliku a dopiero później dodać np. na swoją stronę.
Jakie biblioteki będą nam potrzebne do budowy slidera?
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
Jeśli macie je już dodane nie musicie tego robić ponownie. 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.
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();"></p>Przykładowa struktura HTML
Przykładowo wiec może to wyglądać tak:
<div class="conteiner">
<div class="element" style="background-image:url(https://cdn.pixabay.com/photo/2022/03/01/06/14/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(https://cdn.pixabay.com/photo/2016/02/18/20/02/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(https://cdn.pixabay.com/photo/2022/01/24/17/11/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(https://cdn.pixabay.com/photo/2022/03/02/14/25/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(https://cdn.pixabay.com/photo/2022/03/04/15/14/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ą.