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.
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.
How To: Recreate the Apple Product Slider with JQuery
Sitio: www.cherrysave.com/web-design/how-to-recreate-the-apple-product-slider-with-jquery
