Prosty akordeonowy slider (Accordion slider)

Dziś pokażę jak zbudować prosty slider w formie akordeonu. Od razu uprzedzam, że przyspieszyłam sobie trochę pracę korzystając z Grida wbudowanego w Bootstrap 4. Dlatego części elementów nie będę omawiać. Z pewnością jednak znajomość tej biblioteki może okazać się pomocna.

Dobrze tak więc zaczynamy!

Gotowy skrypt

Od czego zacząć?

Na sam początek potrzebujemy 4 lub więcej obrazków w zależności od tego jaki rodzaj animacji chcemy zrobić. Ja dla tego przykładu zdecydowałam się tylko na 4 grafiki. Ilość grafik na jakie się decydujemy jest istotna nie tylko ze względów estetycznych, ale także przy kwestii doboru grida.

<div class="container demo">
  <div class="row">
    <div class="col-sm-3 pic picture_1">
    </div>
    <div class="col-sm-3 pic picture_2">
    </div>
    <div class="col-sm-3 pic picture_3">
    </div>
    <div class="col-sm-3 pic picture_4">
    </div>
  </div>
</div>

Jak widać w kodzie HTML nie dodałam żadnych obrazów. Zrobiłam to dlatego, że łatwiej będzie ustawić grafikę jeżeli będzie ona tłem. Dla osób chcących dowiedzieć się czegoś więcej o ustawianiu tła strony dodałam link do mojego starego wpisu.

Teraz trzeba więc dodać CSS dla naszego przyszłego akordeonu. Na początek będzie to kod:

html,
body {
  height: 100%;
  min-height: 100%;
  margin: 0px;
}

.demo {
  height: 100%;
  min-height: 100%;
}
.demo .row {
  height: 100%;
  min-height: 100%;
}
.demo .picture_1 {
  background: url(https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?auto=compress&cs=tinysrgb&h=750&w=1260);
  height: 100%;
}
.demo .picture_2 {
  background: url(https://images.pexels.com/photos/1666021/pexels-photo-1666021.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
  height: 100%;
}
.demo .picture_3 {
  background: url(https://images.pexels.com/photos/3493772/pexels-photo-3493772.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260);
  height: 100%;
}
.demo .picture_4 {
  background: url(https://images.pexels.com/photos/3536526/pexels-photo-3536526.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
  height: 100%;
}

Z pewnością ten kod można by nieco skrócić, ale to może w kolejnym etapie. Dodatkowo warto tu wspomnieć, że wysokość została ustawiona na równą przestrzeni roboczej przeglądarki internetowej.

Rozsuwanie warstw

W tej chwili nasz akordeon to tak naprawdę 4 kolumny mieszczące się obok siebie. W celu zmiany tej sytuacji z pomocą jquery dodam na początek do konkretnej kolumny nową klasę. Podobnie postąpcie z pozostałymi kolumnami (oczywiście dodam inną klasę).

I tak (kod nie zadziała bez biblioteki jquery):

$( ".demo .pic" ).hover(
  function() {
    $( ".demo .pic" ).addClass( "smal" );
    $( this ).addClass( "hover" );
  }, function() {
    $( this ).removeClass( "hover" );
    $( ".demo .pic" ).removeClass( "smal" );

  }
);

Oczywiście po dodaniu tego kodu sprawdzam czy na pewno on działa. Poprzez zbadanie kodu strony.

U mnie wszystko bardzo ładnie się dodało. Jeśli u was coś nie działa warto sprawdzić czy macie dodaną dobrą wersję biblioteki jQuery.

W związku z tym, że korzystam z Bootstrapa 4+ mój akordeon opiera się o flexbox. Dlatego też mój kod CSS dla nowych klas wyglądać będzie następująco:

.demo .smal {
  flex: 0 0 15%;
  max-width: 15%;
}
.demo .hover {
  flex: 0 0 55%;
  max-width: 55%;
}

Dodawanie tekstu

Wydawało mi się, że mój akordeon jest trochę pusty dlatego w kolejnym kroku dodałam lekko zmodyfikowałam jego kod poprzez dodanie tekstu.

<div class="container demo">
  <div class="row">
    <div class="col-sm-3 pic picture_1">
      <div class="onpicture">
        <h4>Some text</h4>
        <p>Lorem ipsum</p>
      </div>
    </div>
    <div class="col-sm-3 pic picture_2">
      <div class="onpicture">
        <h4>Some text</h4>
        <p>Lorem ipsum</p>
      </div>
    </div>
    <div class="col-sm-3 pic picture_3">
      <div class="onpicture">
        <h4>Some text</h4>
        <p>Lorem ipsum</p>
      </div>
    </div>
    <div class="col-sm-3 pic picture_4">
      <div class="onpicture">
        <h4>Some text</h4>
        <p>Lorem ipsum</p>
      </div>
    </div>
  </div>
</div>

Oczywiście musiałam go też zaprogramować w CSS.

.demo .pic .onpicture {
  position: absolute;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  padding: 5%;
  width: 70%;
  opacity: 0;
}
.demo .pic:hover {
  -webkit-transition: width 2s;
  transition: width 2s;
}
.demo .pic:hover .onpicture {
  opacity: 1;
  transition: opacity 0.5s, visibility 0.5s;
}

Gotowy przykład:

W przykładzie dodałam też zasady RWD – zmieniają one jednak akordeon w zwykłe pola.