Tworzenie prostego slidera

Dziś, w pierwszym merytorycznym wpisie, przedstawię metodę na stworzenie porstego slidera z pomocą biblioteki jQuery. Jest to sposób podpatrzony u mojego kolegi, podczas pracy przy wspólnym projekcie. Na potrzeby artykułu został on uproszczony.

Sposobów na stworzenie slider’u jest pewnie tyle, ilu programistów, więc nie musi być to wersja optymalna i pozbawiona błędów – uczymy się przecież przez całe życie :).

Jako zachętę do zapoznania się z wpisem, prezentuję efekt końcowy.

See the Pen Simple slider by Łukasz Woźniak (@lwozniak) on CodePen.

HTML

Tworzenie slidera rozpoczynamy od przygotowania szkieletu HTML. Umieścimy w nim również dane, tj. linki do zdjęć oraz tekst, który chcemy umieścić na kolejnych slajdach.

<div id="slider">
</div>

<div id="tmpSlider">
 <div data-background="http://lukasz.5v.pl/wp-content/uploads/2015/12/slide1.jpg" data-text="Lorem ipsum dolor sit amet, consectetur adipiscing elit."></div>
 <div data-background="http://lukasz.5v.pl/wp-content/uploads/2015/12/slide11.jpg" data-text="Liquam tortor enim, posuere eget ultrices vel, fermentum at nunc."></div>
 <div data-background="http://lukasz.5v.pl/wp-content/uploads/2015/12/slide3.jpg" data-text="Maecenas luctus non libero a maximus. Vestibulum et orci turpis."></div>
</div>

</div>

</div>

Wydzielamy dwa div’y. Pierwszy, z identyfikatorem „slider”, który określa jego położenie. Drugi, „sliderTmp”, jest div’em pomocniczym przechowującym dane. Nie będzie on wyświetlany.

Atrybut „data-background” przechowuje link do grafiki a „data-text” – tekst.

CSS

Zaczynamy od globalnego wyzerowania marginesów, paddingu oraz ustawienia border-box’u.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

Div pomocniczy potrzebny jest jedynie dla danych, więc nie chcemy, by się wyświetlał.

#tmpSlider {
 display: none;
}

#tmpSlider {

display: none;

}

Czas na kontener, który opakuje nam właściwą zawartość slider’u. Osobiście uważam, że powinien zajmować całą szerokość strony. Wysokość wedle uznania. W przykładzie zajmie cały ekran.

#slider {
 width: 100vw;
 height: 100vh;
 position: relative;
 top: 0;
 left: 0;
}

#slider {

width: 100vw;

height: 100vh;

position: relative;

top: 0;

left: 0;

}

W strukturze HTML nie znajdziemy div’a o klasie „slide”. Zostanie on dodany za pomocą jQuery. To właśnie do niego wczytamy tekst oraz zdjęcie i, z pomocą JavaScriptu, będziemy iterować po kolejnych elementach tej klasy.

.slide {
  position: absolute;
  height: inherit;
  width: inherit;
  top: 0;
  left: 0;
  display: none;
  background-repeat: no-repeat;
  background-position: center center;
}

.slide {

position: absolute;

height: inherit;

width: inherit;

top: 0;

left: 0;

display: none;

background-repeat: no-repeat;

background-position: center center;

}

W atrybutach brakuje pozycji „background-image” – to też robota dla jQuery.

„display: none” spowoduje niewyświetlenie się pierwszego zdjęcia podczas pierwszej iteracji (po wczytaniu strony). Aby rozwiązać ten problem, musimy mu nadać wyświetlanie blokowe.

.slide:first-of-type {
  display: block;
}

.slide:first-of-type {

display: block;

}

Na koniec ostylujemy tekst.

@import url(https://fonts.googleapis.com/css?family=Titillium+Web);

.slideText {
  font-size: 48px;
  color: #FFF0DE;
  position: absolute;
  padding: 10px;
  text-align: center;
  bottom: 0;
  width: 100%;
  font-family: 'Titillium Web', sans-serif;
  background-color: rgba(0, 0, 0, .9);
}

@import url(https://fonts.googleapis.com/css?family=Titillium+Web);

.slideText {

font-size: 48px;

color: #FFF0DE;

position: absolute;

padding: 10px;

text-align: center;

bottom: 0;

width: 100%;

font-family: 'Titillium Web', sans-serif;

background-color: rgba(0, 0, 0, .9);

}

jQuery

Czas na back-end naszego slidera. Tu umieszczona jest cała logika. Najpierw zmienne (kolejno: referencje do obiektów HTML’owych; indeks aktywnego slajdu; liczba slajdów; czas trwania slajdu [ms]; czas animacji [ms]).

  var $tmpSlider,
    $slider,
    activeSlideIndex,
    numberOfSlides,
    sliderTime = 6000,
    animationTime = 2000;

var $tmpSlider,

$slider,

activeSlideIndex,

numberOfSlides,

sliderTime = 6000,

animationTime = 2000;

Funkcję „SetUp” możemy potraktować jak konstruktor slider’a. Zaczynamy od przypisania do zmiennych interesujących nas obiektów HTML, tj. „tmpSlider” i „slider”. Deklarujemy indeks pierwszego aktywnego slide’a. Zczytujemy ilość div’ów, odpowiadających kolejnym elementom do wyświetlenia.

Następnie dodajemy w pętli, do przygotowanego kontenera „slider”, div’y o klasie „slide”. Każdemu z nich nadajemy własne id. Wewnątrz umieszczamy div „slideText”, który opakuje nam tekst. Na koniec pozostaje nam przypisać atrybut „background-image” oraz tekst – dane pobieramy z przygotowanego na początku div’a „sliderTmp”.

  function SetUp() {
    $tmpSlider = $("#tmpSlider");
    $slider = $("#slider");
    activeSlideIndex = 0;
    numberOfSlides = $tmpSlider.children().length;
    for (var i = 0; i < numberOfSlides; i++) {
      $slider.append('<div class="slide" id="slide' + i + '"><div class="slideText"></div></div>');
      $slider.children().eq(i).css("background-image", "url('" + $tmpSlider.children().eq(i).attr("data-background") + "')").children().html($tmpSlider.children().eq(i).attr("data-text"));
    }
  }

function SetUp() {

$tmpSlider = $("#tmpSlider");

$slider = $("#slider");

activeSlideIndex = 0;

numberOfSlides = $tmpSlider.children().length;

for (var i = 0; i < numberOfSlides; i++) {

$slider.append('<div class="slide" id="slide' + i + '"><div class="slideText"></div></div>');

$slider.children().eq(i).css("background-image", "url('" + $tmpSlider.children().eq(i).attr("data-background") + "')").children().html($tmpSlider.children().eq(i).attr("data-text"));

}

Dla rozjaśnienia przykładu zamieszczę jeszcze kod po wykonaniu się funkcji „SetUp”. W danej chwili tylko jeden element klasy „slide” ma ustawione „display: block”.

<div id="slider">
  <div class="slide" id="slide0" style="display: block; background-image: url(...);">
    <div class="slideText">...</div>
  </div>
  <div class="slide" id="slide1" style="display: none; background-image: url(...);">
    <div class="slideText">...</div>
  </div>
  <div class="slide" id="slide2" style="display: none; background-image: url(...);">
    <div class="slideText">...</div>
  </div>
</div>

</div>

</div>

</div>

Po przygotowaniu danych czas odpalić maszynę. Odpowiada za to zapętlona funkcja „Run”…

  function Run() {
    setInterval(function() {
      Animate();
    }, sliderTime + animationTime);
  }

function Run() {

setInterval(function() {

Animate();

}, sliderTime + animationTime);

}

…która cyklicznie wywołuję funkcję „Animate”…

  function Animate() {
    ChangeActiveSlideIndex();
    ChangeSlide();
  }

function Animate() {

ChangeActiveSlideIndex();

ChangeSlide();

}

…która wywołuje kolejne funkcje :). „ChangeActiveSlideIndex”, jak nazwa wskazuje, zmienia indeks aktywnego slajdu…

  function ChangeActiveSlideIndex() {
    activeSlideIndex++;
    if (activeSlideIndex == numberOfSlides)
      activeSlideIndex = 0;
  }

function ChangeActiveSlideIndex() {

activeSlideIndex++;

if (activeSlideIndex == numberOfSlides)

activeSlideIndex = 0;

}

…a „ChangeSlide” – zmienia wyświetlaną zawartość.

  function ChangeSlide() {
    for (var i = 0; i < numberOfSlides; i++) {
      if (i != activeSlideIndex)
        $slider.children().eq(i).fadeOut(animationTime);
    }
    $slider.children().eq(activeSlideIndex).fadeIn(animationTime);
  }

function ChangeSlide() {

for (var i = 0; i < numberOfSlides; i++) {

if (i != activeSlideIndex)

$slider.children().eq(i).fadeOut(animationTime);

}

$slider.children().eq(activeSlideIndex).fadeIn(animationTime);

}

Pozostaje tylko wywołać nasz skrypt i gotowe.

  $(document).ready(function() {
    SetUp();
    Run();
  });

$(document).ready(function() {

SetUp();

Run();

});

Jeśli dotarłeś(aś) aż tutaj, zostaw proszę komentarz :).

6 grudnia 2015

Programowanie No comments Łukasz

Blog Łukasza

Tworzenie prostego slidera

HTML

CSS

jQuery

Dodaj komentarz Anuluj pisanie odpowiedzi