Selector de productos al estilo Apple Store con jQuery

Si te gusta el diseño que usan en Apple Store, entonces te va a gustar la siguiente implementación.

Se trata de crear un selector de productos muy al estilo Apple que utiliza la biblioteca jQuery.

Implementación

Para realizar esta implementación necesitamos las bibliotecas: jquery.dimensions, ui.mouse y the ui.slider.

EntradasRelacionados

La tecnología y los datos están manteniendo “fresca” a la industria

El Internet de las Cosas revoluciona al mundo

Todos estos archivos más jQuery los enlazamos en la sección Header del HTML de página:

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

Luego creamos una estructura HTML para la implementación de carrusel que es muy simple y que consiste es una simple estructura de lista:

<div>
 <ul>
 <li>Item one</li>
 <li>Item two</li>
 <li>Item three, etc...</li>
 </ul>
 <div>
 <!-- the handler to action the slide -->
 <div></div>
 <!-- labels appear against the slider, as pointers to the user -->
 <span>slider label 1</span>
 <span>slider label 2</span>
 <span>slider label 3</span>
</div>
</div>

El siguiente es el código CSS con los estilos para nuestro selector:

.sliderGallery {
 overflow: hidden;
 position: relative;
 padding: 10px;
 height: 160px;
 width: 960px;
}
.sliderGallery UL {
 position: absolute;
 list-style: none;
 overflow: none;
 white-space: nowrap;
 padding: 0;
 margin: 0;
}

.sliderGallery UL LI {
 display: inline;
}

.handle {
 position: absolute;
 cursor: move;
 top: 0;
 z-index: 100;
 /* bespoke to your own solution */ height: 17px;
 width: 181px;
}a

Luego sólo tenemos que agregar el código jQuery:

$(window).ready(function () {
 $('div.sliderGallery').each(function () {
 var ul = $('ul', this);
 var productWidth = ul.innerWidth() - $(this).outerWidth();

 var slider = $('.slider', this).slider({
 handle: '.handle',
 minValue: 0,
 maxValue: productWidth,
 slide: function (ev, ui) {
 ul.css('left', '-' + ui.value + 'px');
 },
 stop: function (ev, ui) {
 ul.animate({ 'left' : '-' + ui.value + 'px' }, 500, 'linear');
 }
 });
 });
});

Como ves se trata de una forma muy sencilla de implementar este elegante selector de productos.