jQuery slider

Co to jest slider, każdy z was powinien wiedzieć, bo w internecie jest tego na pęczki. Większość takich rzeczy można znaleźć na stronie http://www.webappers.com/ lub http://www.webresourcesdepot.com/. Wystarczy poszukać tam wyrażenia "slider".

Aby lepiej poznać zasadę działania "przewijaczy", napiszemy takie cacko samodzielnie. Wbrew pozorom jest to banalna sprawa.
Wykorzystamy do tego celu bibliotekę jquery. Zrobimy to z 2 powodów. Po pierwsze za jej pomocą skrypty pisze się o wiele przyjemniej, a po drugie - nasz kod jest o wiele krótszy.
Poza tym nie musimy się martwić o animowanie naszych elementów, bo robimy to z automatu ;)

Tworzymy listę

Nasz slider będzie prostą listą, w której poszczególnych elementach będą jakieś informacje (obrazki, teksty itp - po prostu html). Aby móc przewijać taką listę, musimy nadać jej pozycję absolutną oraz umieścić ją w bloku obejmującym, któremu nadamy pozycję relatywną.

Ogólną zasadę działania slidera przedstawiłem na poniższym obrazku:

Na początek stwórzmy kod html naszej listy. Nie będziemy wykorzystywać żadnych id, gdyż chcemy, by można było umieścić kilka takich list na pojedyńczej stronie.

	<ul class="lista">
        <li>
            <h3>Jakiś tytuł</h3>
            <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In libero arcu, vulputate sit amet mattis sit amet, ultrices in erat.</div>
        </li>
        <li>
            <h3>Jakiś tytuł</h3>
            <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In libero arcu, vulputate sit amet mattis sit amet, ultrices in erat.</div>
        </li>

        

	</ul>
	

Listę umieszczamy we wraperze (bloku obejmującym) oraz dodajemy dwa przyciski służące do przewijania:

    <div class="slider">
        <input type="button" value="<" class="prev" />
        
        <div class="wraper">
        
            <ul id="lista">
                <li>
                    <h3>Jakiś tytuł</h3>
                    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In libero arcu, vulputate sit amet mattis sit amet, ultrices in erat.</div>
                </li>
                <li>
                    <h3>Jakiś tytuł</h3>
                    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In libero arcu, vulputate sit amet mattis sit amet, ultrices in erat.</div>
                </li>

                <!-- ...dalsze li -->

            </ul>
            
        </div>
        
        <input type="button" value=">" class="next" />
    </div>
    

Na koniec stylujemy nasze dzieło. Sam wygląd listy to sprawa indywidualna. Musi ona jednak posiadać 2 style: pozycjonowanie absolutne oraz dużą szerokość, tak by wszystkie kolejne LI mogły się obok siebie zmieścić. Nie może to być 100% gdyż wtedy lista przyjmie szerokość wrappera - a tego nie chcemy. Szerokość taką albo wpisujemy z palca (co łatwiej zrobić), albo wyliczamy za pomocą js na podstawie liczby LI.

        .slider {
            width:480px;
            margin:20px;
            overflow:hidden;
            clear:both;
        }

    /* przyciski do przesowania */
        .slider .prev, .slider .next {
            width:20px;
            height:100px;
            float:left;
            background:#fff;
            -moz-border-radius:2px;
            -webkit-border-radius:2px;
            border-radius:2px;
            font:11px Arial;
            color:#333;
            margin:2px;
            border:1px solid #ccc;
        }

    /* wrapper */
        .slider .wrapper {
            width:402px;
            min-height:127px;
            position:relative;
            overflow:hidden;
            border:1px solid #333;
            float:left;
            background:#333;
        }

    /* lista */
        .slider .lista {
            margin:0;
            padding:0;
            list-style-type:none;
            clear:both;
            overflow:hidden;
            position:absolute;
            width:10000px;
        }

        .slider .lista li {
            float:left;
            width:130px;
            min-height:100px;
            background:#ca2027;
            margin:2px 5px 4px 2px;
            -moz-border-radius:4px;
            -webkit-border-radius:4px;
            border-radius:4px;
        }

        .slider .lista li h3 {
            font:bold 12px Arial;
            color:#fff;
            margin:0 0 10px 0;
            padding:5px;
        }

        .slider .lista li div {
            font:10px Arial;
            color:#eee;
            padding:5px;
        }
    

Oskryptowanie

Naszych sliderów może być więcej na stronie, dlatego nasz skrypt musimy podpiąć do każdego z nich. Robimy to za pomocą metody "each".

Po kliknięciu na któryś z inputów przewijających listę, przesuwamy ją w przeciwną stronę, poprzez odpowiednią zmianę jej pozycji absolutnej.
jQuery udostępnia nam możliwość "relatywnej zmiany" danej właściwości. Dzięki temu nie musimy dokładnie wyliczać nowej pozycji naszej listy - wystarczy, że dodamy do aktualnej pozycji wielkość przesunięcia. Robimy to za pomocą "-=" lub "+=" (patrz w poniższy skrypt).
Wartość takiego przesunięcia wyliczamy poprzez pobranie wymiarów pojedynczego LI + wszystkich wymiarów dodatkowych (padding + border + margines). Animację wykonujemy tylko wtedy, gdy lista nie jest aktualnie animowana (czyli zakończy animację pojedynczego przesuwania). Dzięki temu nie występuje błąd powtarzania animacji. Możesz sprawdzić, co się stanie, jeżeli z poniższego kodu usuniesz to wyrażenie (pozostawiając dalszą część).

	$(document).ready(function() {
        var $sliders = $('.slider');

        //dla kazdego slidera na stronie...
        $sliders.each(function() {
            var $current_slider = $(this);
            var $lista = $('.lista', $current_slider);
            var $li = $lista.children('li');

            //jeżeli dla danego slidera LI jest więcej od 3 to będzie można przewijać, inaczej nie ma sensu

            if ($li.length > 3) {
                //wyliczamy odległość pojedynczego przesunięcia
                var odleglosc = $li.eq(0).outerWidth() + parseInt($li.eq(0).css('margin-left')) + parseInt($li.eq(0).css('margin-right'));

				//po kliknięciu next przesówamy listę w lewo. Przed 3 ostatnimi elementami na liście musimy ją zatrzymać tak, by nie robiła się "pusta dziura".
				//Wyliczamy więc maksymalne przesuniecie w lewo
				var maxLeft = odleglosc * $li.length - 3 * odleglosc;

                //po kliknięciu na przycisk Poprzednie, przesówamy naszą listę w lewo
                $('.next', $current_slider).click(function() {
                    if ($lista.position().right > -maxLeft) {
                        $($lista).not(':animated').animate({
                            'left' : '-='+odleglosc
                        },500);
                    }
                });

                $('.prev', $current_slider).click(function() {
                    if ($lista.position().left<0) {
                        $($lista).not(':animated').animate({
                            'left' : '+='+odleglosc
                        },500);
                    }
                });

            } else {

                //jeżeli dla danego slidera przewijanie ma nie działać, wyłączmy działanie jego next i prev
                $('.next, .prev', $current_slider).click(function() {
                    $(this).preventDefault();
                    return false;
                });

            }
        });
    });
	

Powyższy sposób jest bardzo prosty, i właściwie jest tylko wyjściem do bardziej zaawansowanych skryptów. Możemy np użyć pluginu http://gsgd.co.uk/sandbox/jquery/easing/ aby uatrakcyjnić animację przewijania. Możemy też kolejne elementy ładować dynamicznie z serwera za pomocą ajaxu, co wcale nie wykonalne.