Slider Gallery – Tutorial JQuery | Blog | Mateus Souza

Slider Gallery – Tutorial JQuery

Criado por Mateus Souza em 1 de setembro de 2008 às 12:36

Estava navegando pelo site do Mac e gostei do menu em slider(Slider Gallery) e resolvi pesquisar e fazer um tutorial de como fazer esse efeito.

Demonstração / Download dos Arquivos

Vamos ao Tutorial:

Antes de tudo vamos aos arquivos necessários:
Jquery UI – este é como se fosse uma versão do Jquery voltado para designers, pois possui interface gráfica.

jquery.dimensions.js
ui.mouse.js
ui.slider.js

Baixe aqui o pack com todos os arquivos

Etapa 1 – CSS

Vamos colocar o css no html mesmo.cole antes da tag </head>.Este é o codigo:

<style type="text/css" media="screen">
body {
padding: 0;
font: 1em “Trebuchet MS”, verdana, arial, sans-serif;
font-size: 100%;
background-color: #212121;
margin: 0;
}
h1 {
margin-bottom: 2px;
}
#container {
background-color: #fff;
width: 580px;
margin: 15px auto;
padding: 50px;
}
/* slider specific CSS */
.sliderGallery {
background: url(images/productbrowser_background_20070622.jpg) no-repeat;
overflow: hidden;
position: relative;
padding: 10px;
height: 160px;
width: 560px;
}
.sliderGallery UL {
position: absolute;
list-style: none;
overflow: none;
white-space: nowrap;
padding: 0;
margin: 0;
}
.sliderGallery UL LI {
display: inline;
}
.slider {
width: 542px;
height: 17px;
margin-top: 140px;
margin-left: 5px;
padding: 1px;
position: relative;
background: url(images/productbrowser_scrollbar_20070622.png) no-repeat;
}
.handle {
position: absolute;
cursor: move;
height: 17px;
width: 181px;
top: 0;
background: url(images/productbrowser_scroller_20080115.png) no-repeat;
z-index: 100;
}
.slider span {
color: #bbb;
font-size: 80%;
cursor: pointer;
position: absolute;
z-index: 110;
top: 3px;
}
.slider .slider-lbl1 {
left: 50px;
}
.slider .slider-lbl2 {
left: 107px;
}
.slider .slider-lbl3 {
left: 156px;
}
.slider .slider-lbl4 {
left: 280px;
}
.slider .slider-lbl5 {
left: 455px;
}
</style>

Etapa 2 – HTML

Será praticamente a mesma coisa do css mais agora colaremos depois da tag <body>:

<div class="sliderGallery">
<ul>
    <li><img class="pb-airportexpress" src="images/pb_airport_express.jpg" /></li>
    <li><img src="images/pb_airport_extreme.jpg" /></li>
    <li><img src="images/pb_timecapsule_20080115.jpg" /></li>
    <li><img src="images/pb_keyboards20070807.jpg" /></li>
    <li><img src="images/pb_mighty_mouse.jpg" /></li>

    <li><img src="images/pb_cinema_display20071026.jpg" /></li>
    <li><img src="images/pb_mac_pro_20070622.jpg" /></li>

    <li><img class="pb-macmini" src="images/pb_mac_mini.jpg" /></li>
    <li><img src="images/pb_macbook20071026.jpg" /></li>
    <li><img class="pb-macbookair" src="images/pb_macbookair_20080115.jpg" /></li>
    <li><img class="pb-macbookpro" src="images/pb_macbook_pro20071026.jpg" /></li>
    <li><img class="pb-imac" src="images/pb_imac20071026.jpg" /></li>
    <li><img src="images/pb_macosx_20080115.jpg" /></li>

    <li><img src="images/pb_ilife_20080115.jpg" /></li>
    <li><img src="images/pb_dot_mac_20080115.jpg" /></li>
    <li><img src="images/pb_iwork_20080115.jpg" /></li>

    <li><img src="images/pb_quicktime.jpg" /></li>
    <li><img src="images/pb_aperture20080212.jpg" /></li>
    <li><img src="images/pb_final_cut_studio2_20080115.jpg" /></li>
    <li><img src="images/pb_final_cut_express_20080115.jpg" /></li>
    <li><img src="images/pb_logic_studio_20080115.jpg" /></li>

    <li><img src="images/pb_logic_express_20080115.jpg" /></li>
    <li><img src="images/pb_shake_20080115.jpg" /></li>
   	<li><img src="images/pb_apple_remote_desktop_20080115.jpg" /></li>
    <li><img src="images/pb_xserve.jpg" /></li>

    <li><img src="images/pb_xserve_raid.jpg" /></li>
    <li><img class="pb-xsan" src="images/pb_xsan_20080115.jpg" /></li>
    <li><img class="pb-macosxserver" src="images/pb_macosx_server20071016.jpg" /></li>
</ul>
    <div class="slider">
 		<div class="handle"></div>
        <span class="slider-lbl1">Wi-Fi</span>
        <span class="slider-lbl3">Macs</span>
        <span class="slider-lbl4">Aplicativos</span>
        <span class="slider-lbl5">Servidores</span>
    </div>
</div>

Etapa 3 – O script

Esse é o script que fará tudo funcionar, é só cola-lo depois do css:

<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.dimensions.js" type="text/javascript" charset="utf-8"></script>
<script src="ui.mouse.js" type="text/javascript" charset="utf-8"></script>
<script src="ui.slider.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript" charset="utf-8">
    window.onload = function () {
        var container = $('div.sliderGallery');
        var ul = $('ul', container);

        var itemsWidth = ul.innerWidth() - container.outerWidth();

        $('.slider', container).slider({
            minValue: 0,
            maxValue: itemsWidth,
            handle: '.handle',
            stop: function (event, ui) {
	            ul.animate({'left' : ui.value * -1}, 500);
            },
            slide: function (event, ui) {
                ul.css('left', ui.value * -1);
            }
        });
    };
</script>

Pronto. Analise o código e faça algumas alterações se achar melhor.Espero que tenham gostado e até a próxima.

Tutorial feito por: Mateus Souza

Postado em CSS, HTML, Javascript, Tutoriais, jQuery