15# Slajder w nagłówku

Cześć wszystkim!
Od jakiegoś czasu nosiłam się z zamiarem opracowania prostego slidera celem opublikowania tu instrukcji. W końcu się udało i muszę przyznać,że dla mnie efekt jest zadowalający. Pokażę Wam dziś w jaki sposób opracować pokaz slajdów na swojego bloga, a także wytłumaczę jak umieścić taki w nagłówku.
Efekt, który chcemy uzyskać prezentuje się następująco:

⇐

⇒

• pierwszy kotek!
• drugi kotek!
• trzeci kotek!
• czwarty kotek!

Zaczniemy od dodania kodu HTML w miejsce naszego nagłówka. Wchodzimy w nasz edytor kodu HTML, w panelu administracyjnym bloga klikając na odnośnik "Szablon", by następnie skierować się do "Dostosuj kod HTML". Kursor kierujemy na arkusz z kodem i klikamy gdziekolwiek, by po wciśnięciu klawiszy CTRL i F móc wyszukać: <header>
Usuwamy cały kod pomiędzy <header>, a </header> i zastępujemy go:

<div id="slajder">
<div class="poprzedni">⇐</div>
<div class="nastepny">⇒</div>
<ul>
<li>
<img src="adres pierwszego obrazka"/>
<span>podpis pod pierwszym obrazkiem</span>
</li>
<li>
<img src="adres drugiego obrazka"/>
<span>podpis pod drugim obrazkiem</span>
</li>
<li>
<img src="adres pierwszego obrazka"/>
<span>podpis pod pierwszym obrazkiem</span>
</li>
</ul>
</div>

Kod uzupełniamy w preferowane przez nas obrazki i tekst, który ma się pod nimi pojawić.
Szablon zapisujemy.

KROK I i 1/2 - opcjonalnie

Jeśli chcecie, by kliknięcie w slajd powodowało przeniesienie do jakiejś podstrony wystarczy nieco zmodyfikować kod. W takim przypadku każdy element z listy powinien prezentować się następująco:

<li>
<a href="link przekierowania"><img src="adres pierwszego obrazka"/>
<span>podpis pod pierwszym obrazkiem</span></a>
</li>

KROK II - CSS

Czas na edytowanie stylu naszego slidera.
Kierujemy się do panelu administracyjnego naszego bloga, by kolejno przenieść się do Dostosuj > Zaawansowane > Dodaj arkusz CSS
Tam też wklejamy i według preferencji edytujemy następujący kod:

#slajder {
    position: relative;
    overflow: hidden;
  }
  #slajder ul {
    position: relative;
    margin: 0;
    padding: 0;
  }
  #slajder ul li {
    position: relative;
    display: block;
    list-style: none;
    float: left;
    margin: 0;
    padding: 0;
    width: 600px; /*szerokość slajdów*/
    height: 400px; /*wysokość slajdów*/
  }
  #slajder img {
    height: auto;
    max-width: 700px; /*maksymalna szerokość obrazków w slajdach*/
    min-width: 600px; /*minimalna szerokość obrazków w slajdach*/
    min-height: 400px; /*minimalna wysokość obrazków w slajdach*/
    position: relative;
  }
  #slajder li span {
      background-color: rgba(0, 0, 0, 0.5); /*kolor tła pod opisem naszego slajdu*/
      position: absolute;
      display: block;
      font-family: Arial; /*czcionka*/
      font-size: 16px; /*rozmiar czcionki slajdu*/
      text-transform: uppercase; /*zamienienie wszystkich liter na wielkie*/
      text-align: center; /*wyśrodkowanie tekstu*/
      padding: 10px; /*odległość tekstu od ramki*/
      color: white; /*kolor tekstu*/
      width: 580px; /*szerokość ramki z opisem slajdu (by była od brzegu do brzegu zdjęcia należy od szerokości slajdów odjąć 2x padding w odległości tekstu od ramki)*/
      z-index: 1 !important;
      bottom: 0px; /*odległość ramki z opisem od dolnej krawędzi zdjęcia*/
    }
    .poprzedni {
      background-color: rgba(0, 0, 0, 0.8); /*kolor tła pod strzałką kierującą nas do poprzedniego slajdu*/
      color: white; /*kolor tej strzałki*/
      cursor: pointer; /*zmiana kursora*/
      display: block;
      width: 15px; /*szerokość tła strzałki*/
      position: absolute;
      bottom: 180px; /*odległość omawianej strzałki od dolnej krawędzi*/
      z-index: 1;
      padding: 15px; /*odległość strzałki od ramek tła*/
      left: 0px; /*ustawienie strzałki po lewej stronie*/
    }
    .nastepny {
      background-color: rgba(0, 0, 0, 0.8); /*kolor tła pod strzałką kierującą nas do następnego slajdu*/
      color: white; /*kolor tej strzałki*/
      cursor: pointer; /*zmiana kursora*/
      display: block;
      width: 15px; /*szerokość tła strzałki*/
      position: absolute;
      bottom: 180px; /*odległość omawianej strzałki od dolnej krawędzi*/
      z-index: 1;
      padding: 15px; /*odległość strzałki od ramek tła*/
      right: 0px; /*ustawienie strzałki po prawej stronie*/
    }

Zmiany należy zastosować do bloga.

KROK III - JQUERY

Ostatnim co musimy zrobić jest dodanie kodu jQuery, który umożliwi slajderowi spełnianie swojej funkcji.
Kierujemy się, ponownie jak w pierwszym kroku do edytora kodu HTML, by po kliknięciu na obszar z kodem odnaleźć </head>. Tuż nad nim wklejamy następujący kod:

  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script>
  jQuery(document).ready(function ($) {
   var slideCount = $('#slajder ul li').length;
   var slideWidth = $('#slajder ul li').width();
   var slideHeight = $('#slajder ul li').height();
   var slajderUlWidth = slideCount * slideWidth;
   $('#slajder').css({ width: slideWidth, height: slideHeight });
   $('#slajder ul').css({ width: slajderUlWidth, marginLeft: - slideWidth });
    $('#slajder ul li:last-child').prependTo('#slajder ul');
      function moveLeft() {
          $('#slajder ul').animate({
              left: + slideWidth
          }, 500, function () {
              $('#slajder ul li:last-child').prependTo('#slajder ul');
              $('#slajder ul').css('left', '');
          });
      };
      function moveRight() {
          $('#slajder ul').animate({
              left: - slideWidth
          }, 500, function () {
              $('#slajder ul li:first-child').appendTo('#slajder ul');
              $('#slajder ul').css('left', '');
          });
      };
      $('.poprzedni').click(function () {
          moveLeft();
      });
      $('.nastepny').click(function () {
          moveRight();
      });
  });
  </script>

Pogrubione wartości stanowią prędkość przesuwania się kolejnych zdjęć w milisekundach.

To wszystko ode mnie w dniu dzisiejszym.
Jestem Wam winna przeprosiny za częstotliwość postów na tym blogu, uwarunkowane to było niedoborem wolnego czasu. Teraz mam go dużo więcej i obiecuję, że teraz posty będą się pojawiały dużo częściej.
Zachęcam do komentowania! :)

źródła: [x][x][x][x][x]