• Publicidad
  • Contacto
Pixelco Tech News
  • Noticias
  • Video
  • Tecnología
    • Audio & Video
    • LifeStyle
    • Transformación Digital
  • Ciencia
    • Ciencia Ficción
  • Fotografía
  • Internet
    • Desarrollo/programación
    • Diseño
Sin resultados
Ver todos los resultados
Pixelco
  • Noticias
  • Video
  • Tecnología
    • Audio & Video
    • LifeStyle
    • Transformación Digital
  • Ciencia
    • Ciencia Ficción
  • Fotografía
  • Internet
    • Desarrollo/programación
    • Diseño
Sin resultados
Ver todos los resultados
Pixelco
Sin resultados
Ver todos los resultados

Selector de productos al estilo Apple Store con jQuery

Diego CambiasoporDiego Cambiaso
04/09/2009
enDesarrollo/programación, Diseño, Internet, Recursos
Tiempo de lectura2 minutos
Compartir en FacebookCompartir en TwitterCompartir en WhatsappCompartir en TumblrCompartir en Telegram

selector-de-productos-al-estilo-apple-con-jquerySi 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:

Contenidorelaciondo

Samsung muestra la evolución de SmartThings y presenta nuevas experiencias de dispositivos en SDC22

18/10/2022

4 Tips de Oracle para iniciarte en el mundo de la programación

12/04/2022

Ventajas, desventajas y consejos al crear tu sitio web

28/02/2022

Samsung e IBM lanzan el reto “Call for Code”para homenajear a los héroes de la vida

09/11/2021
<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

Tags: apple storecrearCSSCuriosidadJavascriptJavascriptjQueryMacRecursosselectortutorialTutoriales
Diego Cambiaso

Diego Cambiaso

Comunicador Social, Desarrollador de Software y UX Designer Blogger desde el 2006, creador de Pixelco Tech News. Viajero y fotógrafo. Entusiasta del diseño, apasionado por la tecnología y el social media. EN-ES-IT

Contenido Relacionado

Noticias

Samsung muestra la evolución de SmartThings y presenta nuevas experiencias de dispositivos en SDC22

18/10/2022
Recursos

4 Tips de Oracle para iniciarte en el mundo de la programación

12/04/2022
Transformación Digital

Ventajas, desventajas y consejos al crear tu sitio web

28/02/2022
Cargar más

Pixelco Tech

Pixelcoes sitio de noticias de tecnología, diseño y desarrollo web e Internet escrito por profesionales.

Objetivo de Pixelco

Informar, promocionar, proporcionar recursos y ayuda sobre el diseño y desarrollo web, estándares, Internet y tecnología.

  • Contacto
  • Publicidad
  • Sobre Pixelco
  • Política de Privacidad

© 2023 Pixelco Tech News - Internet & Tecnología - Por Diego Cambiaso.

Sin resultados
Ver todos los resultados
  • Publicidad
  • Contacto
  • Política de Privacidad
  • Sobre Pixelco
  • Internet
    • Recursos
    • Diseño
    • Desarrollo/programación
  • Tecnología
  • Noticias
  • Fotografía

© 2023 Pixelco Tech News - Internet & Tecnología - Por Diego Cambiaso.

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies Política de privacidad.
 

Cargando comentarios...