Prosta galeria slider z jQuery

Czas czytania: 3 minut

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 tekst

Bez 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

See the Pen
Gallery – slider
by Aura (@Julka85)
on CodePen.0

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

*Wyrażam zgodę na przechowywanie i przetwarzanie moich danych na potrzeby umieszczenia mojego komentarza.
*W przypadku gdy treść komentarza narusza prawo Polskie i dobro oraz uczucia innych osób Administrator, zachowuje prawo nie publikowania go