Que es S6?
Un control deslizante 3D ligero que funciona con el toque o contacto sobre los móviles mediante transiciones aceleradas por hardware que generalmente son compatibles; S6 es creado por iDangero.us
Objetivos
El objetivo de S6 es llegar a utilizarlo en sitios web para móviles y web. Diseñado principalmente para iOS, pero también trabaja en nuevos androides, así como los últimos navegadores de escritorio con soporte de transformaciones 3D.
Características
- Toque de rotación
- Toque emulación. Esta función será útil si vas a utilizar en el escritorio. S6 acepta eventos del ratón, como eventos de toque haciendo clic y arrastrando para girar deslizante.
- Vertical/Horizontal. S6 tiene estos 2 modos para la rotación y golpes.
- S6. Un cubo de diversión ya que S6 tiene seis caras.
- Modo Libre. Cuando este control está activado no tienen posiciones fijas.
- Rotación/ajuste de cambio de tamaño. S6 se reinicializa después de la rotación o cambio de tamaño de dispositivo o navegador.
- Sensible. Se puede utilizar con una anchura o/y la altura se define en porcentajes. Útil para el uso en dispositivos con resoluciones diferentes.
- HTML. Podremos poner cualquier contenido HTML dentro de la diapositiva.
- API. S6 viene con API muy rico. Te permite crear tu paginación propia, “siguiente” y “anterior” botones “play” y los botones de “pausa”.
- Compatibilidad. Compatible con los navegadores que soportan CSS3 Transformaciones 3D, como Mobile Safari (iOS) más reciente, el navegador nativo de Android, Google Chrome, Safari, Firefox, etc.
- Fallback. S6 viene con característica sorprendente si quieres usarlo en muchos dispositivos que no admiten transformaciones 3D. En este caso es necesario también incluir Swiper y si el navegador no soportan transformaciones 3D, S6 lo detectará.
- Bibliotecas. S6 está diseñado para su uso con jQuery (jQuery Mobile) o bibliotecas de JavaScript Zepto.
- Fácil de usar. Debido a la API simple y el diseño HTML.
- Documentación. S6 viene con documentación completa ilustrada PDF.
- Ultra ligero. Sólo el 3,4 KB minified y comprimido
A continuación te presentamos un video donde se muestra lo que S6 puede hacer en los móviles.
Ejemplo de Uso en HTML
<div> <div class="s6-wrapper"> <!--First Slide--> <div> <!-- Any HTML content of the first slide goes here --> </div> <!--Second Slide--> <div> <!-- Any HTML content of the second slide goes here --> </div> <!--Third Slide--> <div> <!-- Any HTML content of the third slide goes here --> </div> <!--Fourth Slide--> <div> <!-- Any HTML content of the third slide goes here --> </div> </div> </div>
Para más información visita la Página oficial de s6 http://www.idangero.us/sliders/s6/
Fuente: Jorge Soza Suazo
