Si deseamos crear un catálogo en nuestro sitio, podemos hacerlo con este selector de productos realizado con CSS y JQuery que os voy a mostrar a continuación. El selector está inspirado en el que Apple utiliza para sus productos.
Lo primero que debemos hacer es descargar este set de efectos JQuery UI. Por supuesto tenemos que descargar la última librería JQuery. Después tenemos que llamar por nuestro documento a varios de los archivos que acabamos de descargar. Son estos:
jquery.dimensions.js
ui.mouse.js
ui.slider.js
jquery.dimensions.js
ui.mouse.js
ui.slider.js
Para llamarlos (después de haber subido dichos archivos a nuestro servidor) únicamente necesitaremos aplicar estas etiquetas:
<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>
El código JQuery para realizar la función sería este:
$(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');
}
});
});
});
Código CSS
Estructuraremos el contenido mediante listas. Con la etiqueta conseguiremos mostrar las categorías de los productos en la barra deslizante.
.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;
height: 17px;
width: 181px;
}
Código HTML
<div class="sliderGallery"> <ul class="items"> <li>Contenido del producto 1</li> <li>Contenido del producto 2</li> <li>Contenido del producto 3</li> </ul> <div class="slider"> <!--Para accionar el efecto deslizante --> <div class="handle"></div> <span class="slider-lb1">Categoria del producto 1</span> <span class="slider-lb2">Categoria del producto 2</span> <span class="slider-lb3">Categoria del producto 3</span> </div> </div>
Estandarización
CSS 2.1 inválido.
XHTML 1.0 Strict válido.
Ejemplo de su funcionamiento
Vía | JQueryfd
