Advertisement
  1. Code
  2. JavaScript

Los 15 mejores Sliders de JavaScript del 2019

by
Length:MediumLanguages:

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

Los sliders son muy útiles cuando intentas encajar mucho contenido en poco espacio. También pueden hacer que toda la página web parezca mucho más interesante con el uso de algunos efectos de animación básicos.

Cuando se usan correctamente, los sliders pueden mejorar la usabilidad de la página web sin desperdiciar valiosos recursos de pantalla.

En esta publicación, compartiré los sliders de JavaScript disponibles en Envato Market en 2019. Si está buscando un slider para integrarlo en su sitio web, ¡siga leyendo! Puede que encuentres el slider perfecto para tu sitio.

PI Slider JS

PI slider tiene un diseño muy minimalista y pulido que irá bien con casi todos los sitios web.

Ha sido creado utilizando JavaScript puro, sin usar bibliotecas de terceras partes, por lo que no tendrán lugar cargas adicionales de página.

PI Slider

Estas son algunas de sus características:

  • diseño responsivo
  • opción de bucle infinito
  • totalmente personalizable
  • excelente soporte del navegador

El slider está optimizado para dispositivos móviles, por lo que también funciona bien en pantallas táctiles.

Este control deslizante tiene una calificación perfecta de cinco estrellas sobre cinco, el hecho de que cada comprador le haya dado una calificación de cinco estrellas dice mucho sobre la calidad y facilidad de uso de este plugin.

Echa un vistazo a todas las demostraciones de PI Slider para ver cómo puedes usarlo para crear sliders tanto verticales como horizontales.

Plugin para carrusel jQuery responsivo basado en Bootstrap 4

Este paquete de plugins para carrusel contiene una gran variedad de carruseles o sliders destinados a servir a diferentes propósitos. Cuando lo adquieras, tendrás acceso a más de 200 ejemplos y diseños preconstruidos.

El carrusel es totalmente responsivo y ha sido diseñado teniendo en cuenta los dispositivos móviles y las tabletas.

Bootstarp 4 Carousel

Algunas características de este plugin son:

  • navegación mediante imágenes en miniatura
  • uso del sistema de retícula Bootstrap
  • Más de 40 animaciones de texto y capas
  • Más de 8 tipos de transiciones de diapositivas

El plugin es compatible con Bootstrap 3 y Bootstrap 4. Si tu sitio web ya utiliza Bootstrap, el uso de este plugin se deshará de cualquier problema de compatibilidad que pueda haber sido causado por plugins que no están destinados en concreto a Bootstrap.

Además, con el proyecto vienen incluídos los archivos de Font Awesome y las fuentes complementarias de Google.

Echa un vistazo rápido a todas las demostraciones de Bootstarp 4 Carousel, casi con toda seguridad encontrarás algo que te apetezca añadir a tu sitio.

Slider personalizado con asistente

Este plugin de slider personalizado tiene todas las características básicas que podrías esperar en un slider. Sin embargo, lo que realmente lo diferencia, es la facilidad de configuración. La descarga del plugin viene con una herramienta que incluso genera el código a añadir a tu sitio web.

Custom Slider and Wizard

Aquí tienes una lista con sus características:

  • cajetines de subtítulos para cada diapositiva del slider
  • compatible con los gestos táctiles de deslizamiento
  • efectos para las transiciones de empuje y desvanecimiento
  • diseño responsivo y amigable para el SEO

Dado que el plugin no se basa en ninguna biblioteca de terceras partes, no hay ningún efecto perjudicial en la velocidad de tu sitio web.

Juega con todas las opciones disponibles en la demo para comprobar si esto es lo que buscas en un slider.

Paquete de carrusel Bootstrap

Este es un plugin de carrusel basado en Bootstrap y rico en características está diseñado para satisfacer todas tus necesidades en lo que a un slider respecta.

Se puede utilizar para crear algo tan simple como un carrusel de miniaturas o algo tan complejo como un slider que contenga tablas o elementos de formulario.

Bootstrap Carousel Bundle

Aquí tienes un listado con sus principales características:

  • animación de capas de texto en las diapositivas
  • efecto parallax para el carrusel
  • posibilidad de crear diseños de varias columnas
  • responsivo y amigable para dispositivos móviles

Se trata en realidad un paquete con dos plugins, ¡al comprarlos juntos te ahorrarás mucho dinero!

Hay más de 170 funcionales ejemplos en la página de demostración que puedes modificar fácilmente para adaptarlos a tus propias necesidades.

Slidea

Este es un slider, rápido y multipropósito que tiene un aspecto muy profesional. Su elegante diseño y el uso de la animación en diferentes plantillas te dejarán boquiabierto.

Slidea

Estas son algunas de las características de Slidea:

  • diseño en capas para superponer elementos
  • más de 50 animaciones predefinidas y 6 plantillas preconstruidas
  • soporte para contenido de vídeo y múltiples sliders
  • compatible con Bootstrap y Foundation

El plugin es fácil de usar hasta por usuarios novatos, el resultado final se ve increíble. También puedes usarlo para crear sliders a pantalla completa para crear una experiencia de usuario inmersiva.

Simplemente prueba las demostraciones y verás de lo que estoy hablando. Asegúrate de revisar cada plantilla porque todas son únicas.

Paradise Slider

Paradise Slider es otro plugin que aprovecha el framework Bootstrap para crear sliders con impresionantes diseños y animaciones.

La transición de una diapositiva a la siguiente es muy fluida y natural.

Paradise Slider

Estas son algunas de sus más destacadas características:

  • animación de capas de texto en las diapositivas
  • efecto parallax para el carrusel
  • totalmente responsivo con soporte para dispositivos móviles
  • admite vídeos de YouTube, Vimeo y vídeos auto-alojados en servidores privados
  • 8 distintos efectos de transición entre diapositivas

Este plugin ofrece deslizadores y carruseles para todo tipo de contenido. Con sus más de 130 plantillas, podrás crear sliders para imágenes y vídeos, y también para entradas de blog, tablas y formularios.

La página de demostración tiene un montón de ejemplos únicos para cada tipo de contenido. ¡Échales un vistazo para inspirarte!

jQuery Slider Maker

Este sencillo creador de sliders jQuery puede ayudarte a crear tus propios sliders con un bonito efecto Ken Burns en poco tiempo. El sutil desplazamiento panorámico y el zoom de cada imagen hacen que el slider sea mucho más dinámico.

El plugin viene con un área de administración donde simplemente puedes iniciar sesión y empezar a crear tus propios sliders estableciendo diferentes opciones. A continuación, sólo tienes que hacer clic en el botón Publicar para obtener el código que añadirás a tu página web.

jQuery Slider Maker

Aquí tienes una lista, no completa, de las características de este slider:

  • vista previa tiempo real desde el panel de administración
  • totalmente responsivo con deslizamiento táctil
  • animaciones en capas para subtítulos
  • temas basados en las pautas de material design

Simplemente dirígete a la página de demostración y crea tu propio slider para ver lo fácil que es usar jQuery Slider Maker.

Responsive Bootstrap Carousel

Aquí tienes otro carrusel Bootstrap que te permite crear tus propios sliders en un par de minutos.

Responsive Bootstrap Carousel

Estas son algunas de sus características clave:

  • hermosas animaciones y transiciones
  • uso de los iconos de Font Awesome para crear elementos de interfaz de usuario
  • efectos de desvanecimiento, deslizamiento, rotación y zoom para el carrusel
  • totalmente responsivo con soporte táctil

La descarga viene con plantillas para crear sliders con contenidos que van desde imágenes y testimonios de usuarios hasta listados de productos para sitios web de eCommerce. También viene con plantillas para la animación de capas de texto, vídeos y otros elementos.

La interfaz es muy fácil de usar y cuenta con gran cantidad de opciones de configuración. Aunque depende de ti hacer que el slider sea responsivo o asignarle un ancho fijo.

Echa un vistazo a estos agradables sliders de bocadillos o viñetas con testimonios que pueden dar a cualquier sitio web un aspecto único.

Ultimate Sliders Bundle

Como su nombre indica, el paquete slider bundle contiene todos los tipos de sliders y banners, todo lo que hayas podido soñar usar en tu próximo proyecto.

Se trata en realidad un paquete que contiene tres plugins independientes, ofrecidos a un precio de descuento lo que lo convierte en una excelente oferta.

Ultimate Sliders Bundle

Estas son algunas de sus características:

  • múltiples capas para efectos de animación independientes
  • diseño responsivo
  • múltiples diseños de interfaz
  • sliders a pantalla completa
  • sliders con efecto parallax

El texto de cada diapositiva del slider puede animarse desde arriba, izquierda, inferior o derecha. También hay 16 distintos efectos de transición para diapositivas de imagen diferentes a los efectos básicos de empuje y fundido.

La página de demostración del plugin tiene gran cantidad de ejemplos para diseños responsivos, a pantalla completa o de ancho fijo.

Magic Slider

El plugin Magic Slider también tiene mucho que ofrecer en cuanto a características. El nivel de control que se obtiene sobre todos los aspectos de la animación deslizante es increíble.

Magic Slider

Aquí tienes una pequeña muestra de sus características:

  • diseño responsivo con soporte para la navegación en pantallas táctiles
  • elementos en capas que pueden ser animados desde cualquier dirección
  • efecto Ken Burns ultra-suave
  • capacidad de añadir múltiples sliders en la misma página

También puedes integrar videos de YouTube y Vimeo en tu galería de presentación de diapositivas con Magic Slider. También te permite crear sliders de ancho fijo, de ancho completo, responsivos y a pantalla completa.

Existe una gran cantidad de sliders en la página de demostración y cada uno tiene un aspecto completamente único, aunque todos utilizan el mismo plugin, Magic Slider. ¡Pruébalos a todos!

RoyalSlider

RoyalSlider es un plugin de slider para contenido que prioriza el rendimiento, la accesibilidad y la experiencia de usuario de los espectadores.

El plugin afirma humildemente que no viene con una gran cantidad de efectos de fantasía. Sin embargo, los efectos que te permite siempre proporcionarán un rendimiento óptimo para todos tus espectadores.

Royal Slider

Estas son algunas de sus impresionantes características:

  • posibilidad de poner cualquier contenido que desees en las diapositivas o en sus miniaturas
  • carga diferida inteligente para lograr un equilibrio perfecto entre el rendimiento y la experiencia del usuario
  • posibilidad de cambiar la velocidad, la transición y la aceleración para cada subtítulo y animación de diapositivas
  • optimizado para el SEO con imágenes indexables y el uso de etiquetas HTML adecuadas

La interfaz de este plugin es completamente personalizable y con la descarga también se obtiene acceso a los archivos de Photoshop para personalizar la apariencia de su interfaz como desees.

La arquitectura modular de este plugin te permite deshacerte de las partes que no necesites del slider para así optimizar aún más su rendimiento.

Existen un montón de ejemplos en la página de demostración de este plugin que puedes utilizar como punto de partida al crear algo propio.

LayerSlider

Este plugin es mucho más que un slider para mostrar tus imágenes y videos. Es básicamente una plataforma de animación multipropósito que puede utilizarse para crear todo tipo de cosas.

El núcleo del plugin fue recientemente actualizado para asegurarlo de cara al futuro y aumentar su robustez.

Layer slider

Estas son algunas de sus características que harán volar tu mente:

  • más de 200 transiciones de diapositivas predefinidas
  • capas estáticas y efectos emergentes
  • posibilidad de aplicar filtros y enmascarar de forma independiente diferentes capas
  • permite animar todas las propiedades CSS estándar
  • SEO-friendly y optimizado para dispositivos móviles

Si quieres un plugin que te ayude cada vez que quieras añadir algún elemento animado en tu página web, LayerSlider debería ser tu primera opción.

Tan sólo echa un vistazo a las demostraciones en las que el plugin añade impresionantes animaciones a páginas de destino, pop ups, sliders y mucho más. El único límite con este plugin será tu imaginación.

All In One Slider

Este plugin All in One Slider es una solución todo en uno que cubrirá todas tus necesidades.

Puedes usarlo para crear un rotador de banner, un banner de miniaturas, un banner con lista de reproducción, un slider de contenido o un carrusel. Cada uno de ellos tiene su propio conjunto único de ajustes y configuraciones posibles para alterar su comportamiento.

All in One Slider

Estas son algunas agradables características de All In One Slider:

  • 3 apariencias de interfaz predefinidas y 16 efectos de transición para las fotografías
  • animar texto desde cualquier dirección que desees
  • controlar el color, el tamaño y la transparencia del temporizador circular
  • orden de las imágenes aleatorio
  • añadir varias instancias de un slider en la misma página

La reciente actualización de este plugin añadió una nueva característica que te permite crear banners en la barra lateral o "sidebar".

Simplemente, prueba los diferentes tipos de sliders en la página de demostración. Quién sabe, puede que uno de ellos sea exactamente lo que buscas.

Parallax Slider

Este plugin te da la oportunidad de implementar sliders en tu sitio web de una manera única.

Hay 4 versiones de sliders distintas que puedes crear con este plugin. Estos son: Clásico, Perpetuum Mobile, Mouse Interaction y Ultra.

Parallax Slider

Aquí tienes algunas de las características clave del paquete de slider:

  • número ilimitado de elementos por capas
  • posibilidad de controlar el movimiento de una capa entre dos puntos
  • permite que los elementos de capa interactúen con el ratón
  • posibilidad de mover múltiples fondos de forma asíncrona
  • posibilidad de animar las capas de texto en cualquier dirección

Todas estas características permiten crear una experiencia de slider única para tus visitantes. También puedes especificar si los sliders deben tener un ancho fijo, un ancho a pantalla completa o un diseño adaptable.

Basta con echar un vistazo a las demostraciones, estoy seguro de que quedarás impresionado. El movimiento asíncrono de fondos en la versión Ultra de Parallax Slider es muy sutil, pero cambia por completo la forma en que percibes el movimiento de diferentes diapositivas o imágenes.

Timeline Slider

Vamos a terminar este listado con un singular slider que tiene un propósito concreto. Este plugin de slider es completamente diferente de todo lo que hemos cubierto hasta ahora.

A diferencia de otros sliders, este funciona mejor cuando se describe un evento específico a lo largo de la historia, y hace un trabajo fantástico en ese respecto.

Timeline Slider

Aquí tienes algunas características que hacen de este singular plugin algo impresionante:

  • un reproductor de audio incorporado
  • totalmente responsivo después de la última actualización
  • número ilimitado de imágenes e hitos
  • 2 temas y archivos PSD completos en capas para la personalización

Además, puedes cambiar totalmente el aspecto de este plugin usando las 17 opciones que integra.

Es posible añadir botones Leer más, marcas para los hitos y una galería de vídeo o multimedia en diferentes lugares del slider. ¡Esto aumenta su utilidad en muchos sentidos!

Basta con echar un vistazo a la demostración de la evolución del diseño de una silla y descubrirás lo que quiero decir.

Conclusión

En este tutorial, hemos enumerado algunos de los mejores sliders JavaScript disponibles en el marketplace de Envato.

Todos ellos son responsivos y admiten gestos táctiles. Sin embargo, la mayoría de cada uno de ellos se centra además en un área clave que los diferencia. Por ejemplo, el deslizador Royal Slider se centra en el rendimiento, mientras que Layer Slider se parece más a una plataforma de animación que puede utilizarse para crear cualquier cosa, desde sliders hasta popups.

La mejor manera de elegir un plugin de slider del listado consiste en enumerar simplemente tus objetivos y elegir uno que cumpla la mayoría de tus requisitos. Cuéntanos a través de un comentario qué plugin terminaste usando en tus proyectos.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.