PageSlider crea páginas interactivas y presentaciones

AUTOR: Hugo Miguez CREADO: 2018-02-23 12:55:12

Crea fantásticas páginas webs interactivas con Pageslider. Totalmente responsive y compatible con boostrap 4 y animate css. Crea presentaciones, sitios webs interactivos o un slider de imágenes.

Características

  • Totalmente responsive y compatible con bootstrap 4
  • Multiples transiciones y velocidades
  • Puedes crear multiples PageSliders en una misma página
  • Transiciones automáticas con botón para pausar y reiniciar
  • Puedes crear links para cambiar de páginas dentro del mismo PageSlider
  • Animaciones del contenido utilizando el archivo css pageslidertext.css (al final encontrarás como utilizarla) y/o utilizando Animate CSS

Ejemplos

Ejemplo básico Ejemplo con timer Ejemplo con Animate CSS Ejemplo multiple y bootstrap Demo interactivo

Descarga

Descargar PageSlider

Código javascript

$(document).ready(function(){
    var pageslider = new PageSlider();
    pageslider.init('#pageslider', {navRepeat: true, showNavigation: true, height:"100%", showNav: true, navPosition:'bottom', navAlign:'', sleepTime:'', navSequential: false});
});

Código html

<div class="pageslider-container noselect" id="pageslider"> 
    <div class="pageslider-animate animateLeftSpeed-1 animateRightSpeed-075"> 
        <!-- PRIMER BLOQUE --> 
        <div class="pageslider-left animateLeft show" style="background-image: url('plugins/pageslider/img/pantalon.jpg');"> 
            ...
        </div> 
        <div class="pageslider-right animateLeft show"> 
            ...
        </div> 

        <!-- SEGUNDO BLOQUE --> 
        <div class="pageslider-left animateLeft hide" style="background-image: url('plugins/pageslider/img/pantalon1.jpg');"> 
            ...
        </div> 
        <div class="pageslider-right animateLeft hide"> 
            ...
        </div> 
        ...

    </div> 
</div>

Opciones del objeto PageSlider

  • navRepeat: true o false. Permite volver al primer elemento al finalizar la navegación.
  • showNavigation: true o false. Permite activar los botones de navegación de cada elemento.
  • showNav: true o false. Permite activar las flechas de navegación.
  • height: Permite definir el alto del contenedor. Puede expresarse en px, %, vh, etc.
  • navPosition: 'top' o 'bottom'. Permite ver los botones de navegación en la parte superior o inferior. Por defecto es bottom.
  • navAlign: 'left' o 'right'. Permite alinear a la izquierda o derecha. Si no se indica este ningún valor la alineación será centrada.
  • sleepTime: 'slow' o 'fast'. Indicando un valor se activará la navegación automática.
  • navSequential: true o false. Permite pasar a cualquier bloque de la página sin evitando la transición de los bloques intermedios.

Css PageSlider

Div principal

ClaseDescripción
.pageslider-containerContenedor principal de PageSlider

Segundo div

Indicaremos las clases para la duración de las transiciones, aunque también es posible ponerlas en el div principal.

ClaseDescripción
.pageslider-animateIndica que el pageslider tendrá una velocidad de transición por defecto
.animateLeftSpeed-15
.animateLeftSpeed-1
.animateLeftSpeed-075
.animateLeftSpeed-05
Indica la velocidad de transición para la capa izquierda
.animateRightSpeed-15
.animateRightSpeed-1
.animateRightSpeed-075
.animateRightSpeed-05
Indica la velocidad de transición para la capa derecha
.animateStyleLeft-linear
.animateStyleLeft-ease
.animateStyleLeft-ease-in
.animateStyleLeft-ease-out
.animateStyleLeft-ease-in-out
Indica el tipo de transición para la capa izquierda
.animateStyleRight-linear
.animateStyleRight-ease
.animateStyleRight-ease-in
.animateStyleRight-ease-out
.animateStyleRight-ease-in-out
Indica el tipo de transición para la capa derecha

Divs para el bloque izquierdo y derecho

El tercer nivel de divs ya forman las páginas o bloques con el contenido a visualizar. Se deben crear ambos divs siempre (.pageslider-left y .pageslider-right)

ClaseDescripción
.pageslider-leftdiv izquierdo para el contenido
.pageslider-rightdiv derecho para el contenido

Visualización

ClaseDescripción
.showvisualiza el div
.hideocultar el div

Tamaños de las capas

ClaseDescripción
.pageslider-width-0El div sin ancho. Quedará oculto
.pageslider-width-25Ocupará el 25% de ancho
.pageslider-width-50Ocupará el 50% de ancho
.pageslider-width-75Ocupará el 75% de ancho
.pageslider-width-100Ocupará el 100% de ancho
.pageslider-fullresLos bloques (.pageslider-left y .pageslider-right) por defecto se visualizan uno arriba y el otro abajo cuando la pantalla sea inferior a 768 píxeles. Si se indica la clase .pageslider-fullres forzará a las capas mantener el valor asignado del ancho, pero ese ancho pasará a ser el nuevo valor del alto, ya que el ancho será siempre 100%.

Transiciones

ClaseDescripción
.animateLeftanimación hacia la izquierda
.animateLeftFadeanimación hacia la izquierda con fade
.animateRightanimación hacia la derecha
.animateRightFadeanimación hacia la derecha con fade
.animateUpanimación hacia arriba
.animateUpFadeanimación hacia arriba con fade
.animateDownanimación hacia abajo
.animateDownFadeanimación hacia abajo con fade
.animateZoomanimación con efecto de zoom

Otras clases

Al usar una imagen de fondo puede que el texto no resalte lo suficiente y necesites oscurecer la imagen. Para solucionar este problema puedes utilizar un nuevo div con la clase .pageslider-content justo después del div .pageslider-left y/o .pageslider-right

ClaseDescripción
.pageslider-contentDentro de este div se pueden utilizar las siguientes clases para modificar la opacidad del fondo
.darkDa un color translucido oscuro por encima del fondo
.lightDa un color translucido claro por encima del fondo

Centrar texto y contenido dentro de cada bloque

Para poder centrar el contenido deberás crear dos divs anidados con las siguientes clases

<div class="pageslider-outer">
    <div class="pageslider-middle center">
        contenido centrado vertical y horizontalmente
    </div>
</div>
ClaseDescripción
.pageslider-middleAlineación vertical centrada. Es necesario crear el div que con lo contiene con la clase .pageslider-outer
.centerAlinea el contenido de forma centrada
.rightAlinea el contenido a la derecha
.justifyAlinea el contenido de forma justificada

Animaciones especiales

Puedes incluir el archivo css pageslidertext si deseas añadir animaciones dentro del contenido. Solo se incluyen 4 animaciones básicas pero puedes utilizar la conocida libreria css animate.css

ClaseDescripción
.pageslider-textZoomAnimación con efecto de zoom
.pageslider-textRotateAnimación con efecto de rotación
.pageslider-textZoomRotateAnimación con zoom y rotación
.pageslider-textUpAnimación donde el contenido aparece desde arriba
.pageslider-sleep-0-5sSleep de 0.5 segundos de espera para comenzar la animación
.pageslider-sleep-1sSleep de 1 segundo de espera para comenzar la animación
.pageslider-sleep-1-5sSleep de 1.5 segundos de espera para comenzar la animación
.pageslider-sleep-2sSleep de 2 segundos de espera para comenzar la animación
.pageslider-sleep-3sSleep de 3 segundos de espera para comenzar la animación

Comentar

Para poder realizar comentarios. Primero debes inicar sesión o crear una cuenta.