Przewijarka (slider) newsów w jQuery

Autor: Tomasz "DoMeL" Wojciechowski, dodano: 21-04-2010
Kategoria: Programowanie i tworzenie

Użytkownicy polubili slidery przy prezentowaniu ciekawych wiadomości z witryny. Są efektowne, wprowadzają interakcję i mogą "schować" sporo treści. jQuery daje nieograniczone możliwości przy tworzeniu takich elementów. Oto jeden z nich.

Zanim zaczniemy, musimy ściągnąć bibliotekę jQuery oraz plugin jQuery Flow.

Download

jquery-1.4.2.js (zapisz jako...)
jquery.flow.1.1.min.js (zapisz jako...)

Pliki te umieszczamy w tym samym katalogu co plik index. Pierwszym krokiem będzie osadzenie w sekcji <head> skryptów odpowiedzialnych za działanie oraz wywołanie skryptu. Do sekcji <head> wstawiamy kolejno poniższy kod:

<script src="jquery-1.4.2.js" type="text/javascript"></script>
<script src="jquery.flow.1.1.min.js" type="text/javascript"></script>

jquery-1.4.2.js - jest to biblioteka jQuery niezbędna do uzyskania naszego efektu;
jquery.flow.1.1.min.js - odpowiedzialny za działanie skryptu, zawarte są w nim wszystkie parametry odnośnie naszego Flow (prędkość przewijania i inne funkcje).

Następnym krokiem jest dodanie trzeciego skryptu, który jest odpowiedzialny za wywołanie oraz odpowiednie działanie naszego Flow.

<script type="text/javascript">
$(function() {
$("div#controller").jFlow({
slides: "#slides",
width: "900px",
height: "250px"
});
});
</script>

Sekcję <head> mamy już za sobą. Teraz musimy napisać nasze ciało dokumentu. W sekcji <body>, która odpowiedzialna jest za wyświetlanie treści na stronie umieszczamy poniższy kod:

<div id="container">
    <div id="controller" class="hidden">
       <span class="jFlowControl"></span>
       <span class="jFlowControl"></span>
       <span class="jFlowControl"></span>
    </div>

  <div id="slides">

   <div>
      <div class="featured-text">
        <h1 class="featured">
            featured text here 01
        </h1>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus porttitor est et ante euismod 
            vel euismod   tortor ornare. Quisque turpis augue, iaculis vel luctus non, dapibus a ante. Quisque vitae 
            turpis augue. Nulla facilisi.  Continue Reading...
        </p>
   </div>
   <div id="featured-image01">
      <div class="featured-buttons">
          <div class="featured-btn">
              <img src="next_btn.png" alt="Next" class="jFlowNext" />
                  <div class="featured-btn">
                      <img src="prev_btn.png" alt="Previous" class="jFlowPrev" />
                  </div>
          </div>
      </div>
   </div>
   </div>

 <div>
      <div class="featured-text">
        <h1 class="featured">
            featured text here 01
        </h1>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus porttitor est et ante euismod 
            vel euismod   tortor ornare. Quisque turpis augue, iaculis vel luctus non, dapibus a ante. Quisque vitae 
            turpis augue. Nulla facilisi.  Continue Reading...
        </p>
   </div>
   <div id="featured-image02">
      <div class="featured-buttons">
          <div class="featured-btn">
              <img src="next_btn.png" alt="Next" class="jFlowNext" />
                  <div class="featured-btn">
                      <img src="prev_btn.png" alt="Previous" class="jFlowPrev" />
                  </div>
          </div>
      </div>
   </div>
   </div>

 <div>
      <div class="featured-text">
        <h1 class="featured">
            featured text here 01
        </h1>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus porttitor est et ante euismod 
            vel euismod   tortor ornare. Quisque turpis augue, iaculis vel luctus non, dapibus a ante. Quisque vitae 
            turpis augue. Nulla facilisi.  Continue Reading...
        </p>
   </div>
   <div id="featured-image03">
      <div class="featured-buttons">
          <div class="featured-btn">
              <img src="next_btn.png" alt="Next" class="jFlowNext" />
                  <div class="featured-btn">
                      <img src="prev_btn.png" alt="Previous" class="jFlowPrev" />
                  </div>
          </div>
      </div>
   </div>
   </div>
 </div>
</div>

Przyjrzyjmy się bliżej naszemu kodowi

<div class="featured-text"> - sekcja odpowiedzialna za wyświetlanie się tekstu, w naszym wypadku jest to

nagłówek oraz treść;

<h1 class="featured"> ... </h1> - sekcja ta odpowiedzialna jest za nagłówek;

Pomiędzy <p> a </p> umieszczamy naszą treść, która wyświetlana będzie pod naszym nagłówkiem;

<div id="featured-image02"> - sekcja odpowiedzialna za wyświetlanie się obrazka;

<div class="featured-buttons"> oraz <div class="featured-btn"> - ta część kodu odpowiada za wyświetlanie oraz prawidłowe działanie naszych przycisków wstecz oraz dalej;

<div class="featured-btn"> - wyświetlanie oraz prawidłowe działanie przycisku dalej;

<img src="next_btn.png" alt="Next" class="jFlowNext" /> - obrazek użyty do funkcji dalej;

<div class="featured-btn"> - wyświetlanie oraz prawidłowe działanie przycisku wstecz;

<img src="prev_btn.png" alt="Previous" class="jFlowPrev" /> - obrazek użyty do funkcji wstecz;

Pozostaje nam teraz dodanie obrazków oraz ostylowanie (nadanie stylu oraz poprawne wyświetlanie).

Wykorzystane grafiki

Do naszego efektu użyjemy poniższych obrazków, które umieściliśmy w tym samym katalogu:

oraz przyciski do przewijania manualnego:

Tworzymy style CSS

Teraz czas na magię css! W pliku odpowiedzialnym za style umieszczamy poniższy kod:

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #000000;
        color: #ffffff;}

p {
font-size: 0.7em;
line-height: 18px;
text-align: justify;}

h1 {
color: #ffffff;
text-transform: uppercase;
font-size: 1.1em;
font-weight: normal;}

#container {
width: 900px;
margin: 0px auto;}

#featured-image01 {
background-image: url(featured_image.png);}

#featured-image02 {
background-image: url(featured_image2.png);}

#featured-image03 {
background-image: url(featured_image3.png);}

.featured-text {
float: left;
width: 450px;
margin-top: 25px;}

#featured-image01, #featured-image02, #featured-image03 {
float: right;
width: 449px;
height: 214px;
background-repeat: no-repeat;
background-position: right;}

#featured-image {
float: right;
width: 449px;
background-image: url(images/featured_image.png);
background-repeat: no-repeat;
background-position: right;
height: 214px;}

.featured-buttons {
height: 144px;
width: 34px;
margin-left: 75px;
padding-top: 70px;}

.hidden {
display: none;}

Efekt końcowy

Jak widzimy, obrazki nie są wyświetlane z sekcji <body> lecz jako tło. Bardzo ważnym atrybutem w naszym przypadku jest ostatnia sekcja CSS, która odpowiada za poprawne wyświetlanie. I właściwie to wszystko. Nasz efekt prezentuje się następująco:

webinside.pl/jq/slider

Jak dodać nową pozycję?

Na początku musimy dodać linijkę:

<span class="jFlowControl"></span>

do sekcji:

<div id="controller" class="hidden">

Odpowiada ona za samo wyświetlanie. Następnym krokiem jest dodanie poniższego kodu aby skrypt mógł wyświetlić naszą nową pozycję:

<div>
      <div class="featured-text">
        <h1 class="featured">
            Tytul
        </h1>
        <p>
            tresc
        </p>
   </div>
   <div id="webinside">
      <div class="featured-buttons">
          <div class="featured-btn">
              <img src="next_btn.png" alt="Next" class="jFlowNext" />
                  <div class="featured-btn">
                      <img src="prev_btn.png" alt="Previous" class="jFlowPrev" />
                  </div>
          </div>
      </div>
   </div>
</div>

Uwaga!

Dodając sekcję <div id="webinside"> ... </div> musimy do pliku .css dodać:

#webinside

Powinno wyglądać to mniej więcej tak:

#featured-image01, #featured-image02, #featured-image03, #webinside {
float: right;
width: 449px;
height: 214px;
background-repeat: no-repeat;
background-position: right;}

Drugą czynnością, którą musimy wykonać jest dodanie do pliku .css kodu:

#webinside {
background-image: url(sciezka do obrazka);}

I to wszystko. Zapraszamy jak zawsze do eksperymentowania z jQuery i wdrażania własnych pomysłów. Swoje uwagi możecie zamieszczać w komentarzach poniżej.

Powodzenia!

Ocena 2.58/5 (51.57%) (159 głosów)

Komentarze:

Nie działa w Chrome
Dodał: Gość data: 2010-05-19
Dlaczego na mojej stronie działa we wszystkich przeglądarkach, tylko nie w chrome? Dodam, że przykładowy skrypt do tego artykułu, działa bez problemu...
Dodał: DoMeL data: 2010-05-20
Może gdzieś błąd popełniasz?
Dodał: Gośćiu data: 2010-05-30
No jak, skoro działa mi w innych przeglądarkach...
Dodał: Gośćiu data: 2010-06-02
Napiszę, jak rozwiązałem mój problem:

Problem powodowało, to że główny div strony miał w html'u atrybut 'alig="center', po usunięciu działa już pod Chrome(Safari też wcześniej protestowała, teraz jest dobrze). Diva wyśrodkowałem w css, nie ma problemu.

Zastanawia mnie czemu to miało wpływa na działanie tego slidera w Chrome i Safari...

Pozdrawiam!
alkazercer
Dodał: Gość data: 2010-06-17
Uważam że używanie takich sliderów powinno być ustawowo zabronione gdyż wymusza poziome przewijanie które z założenia jest złe. Może być stosowane jedynie na stronach domowych artystów i upośledzonych umysłowo właścicieli dużych koncernów.
Aleś wypalił
Dodał: Gość data: 2010-08-19
alkazercer aleś wypalił. "dlatego, że z założenia jest złe" buhahaha. Z założenia to przewijanie poziome ale paskiem przeglądarki jest złe(jak ci się strona nie mieści i musisz przewinąć paskiem przeglądarki żeby zobaczyć całość). Musisz być jednym z tych upośledzonych chyba.
Automatyczne przewijanie
Dodał: Gość data: 2010-08-26
A jak zrobić żeby slajdy przewijały się automatycznie?
slider pionowy
Dodał: szymisiu data: 2011-02-10
Bardzo fajny tutorial. Gratulacje. Jestem w trakcie robienia znajomym stronki na sliderze pionowym, tylko w IE rozwala się menu. Może ktoś pomoże?
www.fletissimo.web44.net
Przwiejanie
Dodał: emilo1 data: 2011-02-28
Można zrobić żeby było automatyczne?
Dodał: dachu data: 2011-04-29
podoba sie
nie dziala w php?
Dodał: adas90 data: 2011-05-01
WITAM, mam pytanie, jesli moze mi ktoś pomoc.. - co mam zrobić, żeby zadziałało mi to w pliku .php ?? Probowalem, ale tylko w html dziala. Ktoś podpowie ?
nie dziala poprawnie na innym komputerze
Dodał: qbass data: 2011-06-22
slider nie dziala poprawnie na komputerze kolegi. mamy te same przegladarki (nie jestem pewien czy wersje tez), ale np. inne rozdzielczosci monitora. czy to ma w ogle jakis wplyw skoro wszystko jest ustawione w cms? ma ktos jakis pomysl?
czy to działa w extreme fusion?
Dodał: wiedxma data: 2011-08-18
witam, chciałam się dowiedzieć czy ten slider napisany w ten sposób będzie działał na extreme fusion a jeśli nie to jakich modyfikacji należy dokonać zeby działał?
Pytanko
Dodał: Gość data: 2011-09-05
Hejka, a jak zrobić autoscroll??
slider
Dodał: Gość data: 2012-05-18
A jak zrobić by np slider wyświetlał losowe ogłoszenia z puli ogłoszeń promowanych? Zeby sam pobierał treść z bazy i umieszczał na stronie?

Dodaj komentarz:

Poprzedni Następny

Temat:
Twój nick:
Komentarz:

Prosimy o kulturę wypowiedzi. Komentarze zawierające niecenzuralne zwroty, bądź obrażające inne osoby będą usuwane. Kod HTML w wypowiedziach jest niedozwolony. Wydawca nie odpowiada za treść komentarzy.

Menu

Dla webmastera