search check home clock-o tag tags chevron-left chevron-right chevron-up chevron-down twitter facebook github rss comment comments terminal code

[jQuery] Efektowny slider z użyciem klawiatury

W dzisiejszym tutorialu przedstawię sposób na efektowny slider, który będzie obsługiwany między innymi przez klawiaturę.

Taki slider można wykorzystać do tworzenia efektownych prezentacji swoich prac lub prezentacji swoich zdjęć na stronie.

Na początek zaczynamy od kodu HTML:

<div id="prezentacja">
<div id="lewa"><a href="javascript:slide('left');"><img src="left.png" /></a></div>
<div id="slider">
<ul id="slider_lista">
<li><a href="#"><img src="avatar.jpg" /></a></li>
<li><a href="#"><img src="avatar.jpg" /></a></li>
<li><a href="#"><img src="ja.jpg" /></a></li>
<li><a href="#"><img src="avatar.jpg" /></a></li>
<li><a href="#"><img src="avatar.jpg" /></a></li>
<li><a href="#"><img src="ja.jpg" /></a></li>
<li><a href="#"><img src="avatar.jpg" /></a></li>
<li><a href="#"><img src="avatar.jpg" /></a></li>
</ul></div>
<div id="prawa"><a href="javascript:slide('right');"><img src="right.png" /></a></div>
<input type="hidden" id="hidden_auto_slide_seconds" value=0 />
</div>

Jak widać, zastosowałem tutaj dwa mikrokody w JavaScript, które odpowiadają za interakcje slidera z użytkownikiem w celu przewinięcia prezentacji.

Teraz przechodzimy do kodu JavaScript, który będzie odpowiadał za całą animację slidera:

$(document).ready(function() {
 
        //opcje( 1 - włączony , 0 - wyłączony)
        var auto_slide = 1;
            var hover_pause = 1;
        var key_slide = 1;
 
        //prędkość przewijania
        var auto_slide_seconds = 5000;
        //UWAGA: wartości czasowe podajemy w milisekundach
 
        //przesuń obiekt z ostatniego miejsca na miejsce przed pierwszym. Chodzi o to, żeby użytkownik widział wszystkie pozycje ze slidera bez przerwy.
        $('#slider_lista li:first').before($('#slider_lista li:last'));
 
        //sprawdzenie czy auto-sliding jest włączony
        if(auto_slide == 1){
            var timer = setInterval('slide("right")', auto_slide_seconds);
            $('#hidden_auto_slide_seconds').val(auto_slide_seconds);
        }
 
        //sprawdzenie czy pauza w efekcie hover jest włączona
        if(hover_pause == 1){
            $('#slider_lista').hover(function(){
                //zatrzymanie przesuwania gdy :hover
                clearInterval(timer)
            },function(){
                //włączenie ruchu
                timer = setInterval('slide("right")', auto_slide_seconds);
            });
 
        }
 
        //sprawdzenie czy obsługa klawiszy jest włączona
        if(key_slide == 1){
 
            //ustawianie przycisków do interakcji
            $(document).bind('keypress', function(e) {
                //kod przycisku "strzałka w lewo" to: 37, a "strzałka w prawo" to: 39
                if(e.keyCode==37){
                        //przesuń w lewo
                        slide('left');
                }else if(e.keyCode==39){
                        //przesuń w prawo
                        slide('right');
                }
            });
        }
  });
 
//funkcja przesuwania
function slide(where){
 
            //pobieranie szerokości pojedynczego obiektu
            var item_width = $('#slider_lista li').outerWidth() + 10;
 
            //sprawdzenie czy animacja ma iść w prawo czy w lewo
            if(where == 'left'){
                //kalkulacja ruchu w lewo
                var left_indent = parseInt($('#slider_lista').css('left')) + item_width;
            }else{
                //kalkulacja ruchu w prawo
                var left_indent = parseInt($('#slider_lista').css('left')) - item_width;
 
            }
 
            //efekt przesuwania z użyciem biblioteki jQuery
            $('#slider_lista:not(:animated)').animate({'left' : left_indent},500,function(){
 
                //tworzenie iluzji nieskończonej prezentacji
                if(where == 'left'){
                    $('#slider_lista li:first').before($('#slider_lista li:last'));
                }else{
                    $('#slider_lista li:last').after($('#slider_lista li:first'));
                }
 
                $('#slider_lista').css({'left' : '-90px'});
            });
}

Powyższy kod został jasno wyjaśniony (tak mi się wydaje), więc nie trzeba tłumaczyć go ponownie.

Na koniec dodamy trochę stylizacji:

#slider {
	float:left;
	width:630px;
	overflow: hidden;
	background: #F0F0F0;
}
 
#slider_lista {
	position:relative;
	left:-90px;
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	width:9999px;
	padding-bottom:10px;
}
 
#slider_lista li{
	float: left;
	width:80px;
	padding:0px;
	height:80px;
	background: #000000;
	margin-top:10px;
	margin-bottom:10px;
	margin-left:5px;
	margin-right:5px;
}
 
#slider_lista li img {
	.margin-bottom:-4px; /*specjalny trick dla IE*/
	cursor:pointer;
	cursor: hand;
	border:0px;
}
#lewa, #prawa{
	float:left;
	height:130px;
	padding-top: 22px;
	width:64px;
}
#lewa img, #prawa img{
	border:0;
	cursor: pointer;
	cursor: hand;
}

I to by było na tyle. Demo z tego tutoriala można zobaczyć tutaj --> Slider jQuery

  • paka

    Witam
    mam pytanie, czy da się zrobić, żeby obrazki przesuwały się nie o jedną pozycję a np. o 3? Bo sobie ustawiłem, że wyświetla 4 w rzędzie i chciałbym, żeby ostatni, czyli 4, po naciśnięciu pojawił się na pierwszej pozycji.

    Pozdrawiam

  • spróbuj pobawić się z szerokością obiektu przesuwanego, to może pomóc 😉

  • Rafal

    szukam takiego rozwiazania w ktorym obrazki beda sie plynnie przewijac zamaist skakac do nastepnego, moze rozbudujesz swojego slida o taka funkcje?

  • Wezmę tą sugestię pod uwagę, ale to będzie miało miejsce nie wcześniej jak w lutym.
    Po mojej sesji 😉

  • Fajny sliderek, super śmiga, właśnie czegoś takiego szukałem

  • Szukałem takiego rozwiąznia od dawna. Super sprawa . Dzięki za zamieszczenie tego przykładu. Pozdrowionka.

  • Krystian

    Zadziała jak na stronie umieszczę dwa jeden pod drugim?

  • Ciężko powiedzieć.
    Tutaj domyślnie slider wie, że klawiatura służy do obsługiwania tylko tego slidera.
    Musiałbyś stworzyć jakiś kontroler lub opcję wyboru, w której podasz skryptowi nazwę slidera który aktualnie ma być obsługiwany klawiaturą.
    Innego rozwiązania nie widzę.