Lory Carousel Slider cuenta con animación CSS y soporte táctil

De todos los plugins de carrusel en línea Tengo que quitarme el sombrero Lory. Es tal concepto simple pero es fácilmente uno de los deslizadores más potentes En la red.

los versión minificada Total de alrededor de 7KB, que no es pequeño pero ciertamente no es malo para un control deslizante de carrusel táctil.

Puedes agregar este plugin a cualquier sitio web ya que corre en jQuery o en vainilla simple JS. Puede funcionar con sin dependencias que es genial para la compatibilidad.

Lory es también uno de los pocos plugins que no se degrada en navegadores antiguos. Sus totalmente compatible con IE10+, y versiones anteriores todavía pueden ejecutar el control deslizante, solo Sin animaciones y pequeños extras..

Tendrás que haz todo el código programático tu mismo Si quieres agregar contenido pero es sorprendentemente simple. Puede definir el tamaño de cada panel, la duración de la animación y cómo manejar los navegadores sensibles..

Echa un vistazo a la página principal de Lory para código fuente y detalles sobre la configuración.

Comience agregando la biblioteca de Lory JS a tu sitio cabeza sección, ya sea como un complemento de jQuery o una biblioteca de vainilla. Todas las versiones son actualmente. alojado en el CDN Cloudflare, Así que es muy fácil incluir una copia sin ninguna descarga..

Con el archivo JavaScript instalado, querrá crear una lista HTML sin ordenar con el contenido de la diapositiva, pero Lory viene con unas pocas clases predefinidas así que es bueno seguir con su modelo.

Aquí hay algunos Código de muestra tomado de la repo principal de Lory GitHub:

Ahora en jQuery (o JS simple), puedes configurar una llamada de función. Debería verse algo como esto:

 $ ('. js_slider'). lory (infinite: 1);

Nota la infinito Esta opción es solo una de las muchas características que puede personalizar. Y siempre puedes cambiar el .js_slider clase para satisfacer sus necesidades.

Al desarrollar con este complemento, es probable que tengas toneladas de preguntas de personalización. Yo recomendaría altamente navegando por la documentación que está en la parte inferior de la página de GitHub.

Probablemente no sea el mejor lugar para documentos, pero afortunadamente son bastante pequeños. Tu solo tienes alrededor de 10 opciones para personalizar y tal vez 10-12 eventos diferentes usted puede jugar con Esta información también se puede encontrar en la parte inferior del sitio web de Lory, pero es mucho más fácil de leer en GitHub.

Las actualizaciones no son tan frecuentes pero siempre puedes escribir una solicitud de problema en GitHub si te encuentras con problemas. Si realmente tiene problemas con el código, probablemente le resulte más fácil resolverlos en Stack Overflow.

De cualquier manera, puedes empezar bastante rápido usando el CDN de Cloudflare y los documentos de GitHub. Y si estás buscando un demostración en vivo con código Echa un vistazo a esta entrada CodePen.