• no-jQuery Content Slider
  • Content Slider with Zero jQuery
  • Wordpress Content Slider with CSS only
  • Responsive Content Slider w/o jQuery

Slide Animation & Boundary Design Jquery Content Slider

Este tema de deslizador poco inusual es muy moderno y atractivo. Tiene una forma más "cuadrada" que la mayoría de los deslizadores de los sitios web, lo que permite que funcione con imágenes que no sean paisajes. Podría ser una gran opción para un sitio web de portafolio, o para exhibir retratos de personas y animales.

El control deslizante utiliza un esquema de color burdeos profundo, compensado con blanco. Es un color inusual y llamativo que sugiere lujo y sofisticación.

Cada imagen en el deslizador se acerca y se aleja, desapareciendo poco a poco revelando la siguiente imagen.

En la esquina inferior izquierda hay una sola línea de título. Es un texto blanco en un rectángulo de color burdeos, que se desliza desde la izquierda. El rectángulo se encuentra alineado con la esquina del deslizador, lo que significa que no cubre o distrae las imágenes.

El cuadrado de texto utiliza una fuente serif sofisticada llamado Lora.

En la esquina inferior derecha hay una serie de círculos de color burdeos redondos. Cada uno de estos círculos se vincula a una imagen en la presentación. El círculo vinculado a la imagen activa contiene un punto blanco en el centro.

Al pasar el cursor sobre los círculos abre una vista previa de la imagen relevante. Al hacer clic cargará esa imagen en la presentación.

Además, al pasar sobre los círculos nos lleva a otro, un círculo final que contiene o bien un icono de pausa o un icono de reproducción.

Una de las partes más atractivas de este diseño son las flechas anterior / siguiente que aparecen cuando se pasa el cursor sobre el deslizador.

Estos son dos rectángulos alineados verticalmente, en burdeos, que reposa al ras con el borde izquierdo y derecho de la presentación de diapositivas. En el interior hay una flecha blanca fina. Al pasar el cursor sobre una de las flechas, sin embargo, hace que se convierta más alta y que se deslice hacia el exterior, formando un marco en una miniatura de la imagen anterior / siguiente en el deslizador. La sensación general de la animación es genial, todo es sencillo, sin fisuras y con una velocidad perfecta.

En general, este tema es cálido, sofisticado y moderno - ideal para un sitio web de antigüedades, cualquier sitio de venta de artículos de lujo como perfumes, o un fotógrafo con un estudio con configuraciones de lujo.

Como era de esperar, el deslizador responde y se adapta a sí mismo automáticamente con el tamaño de la pantalla. En las pantallas más pequeñas algunas de las funcionalidades desaparecen, permitiendo que más de la imagen se muestre y se mantengan las cosas simples para los usuarios de pantallas táctiles.

El deslizador utiliza CSS3 y HTML5 para lograr todas las transiciones e iconografías - no hay imágenes utilizadas (aparte de los que están dentro del deslizador) para ralentizar el sitio web o causar problemas con la carga. Debido a que el deslizador no utiliza Javascript o JQuery, este funcionará en todas las plataformas modernas, y, nuevamente, no hay scripts externos para causar retrasos o problemas de cargas.

De hecho, este es un excelente tema que sería una gran adición a casi cualquier sitio web.