[contact-form-7 id="24084" title="Feedback ES"]

jQuery Slider “SliderPager”

JavaScript

Debemos incluir framework jQuery y sliderPager.js señalando el  atributo src de la etiqueta de script a  esos ficheros .js.

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/sliderPager.js"></script>

La sección <head> del fichero index-#.html contiene estas líneas de código que inicializan la funcionalidad de script con los valores básicos

$(function(){
    $('.pages').slidePager({
        easing:'easeInOutElastic',
        pagernav:'header nav ul li',
        change:function(n){
            if(n!=0){
                $('header h1,header nav').animate({top:'18%'},'slow','easeOutQuint')
            }else{
                if(n==0)$('header h1,header nav'). animate({top:'50%'}, 'slow', 'easeInSine')
            }
        }
    })
})

En el script especificamos el nombre de clase para el contenedor con slides – .pages
easing – efecto de animación (en este caso, utilizamos la biblioteca de efectos externos – jquery.easing.1.3.js)
pagernav – aquí definimos los elementos que serán asignados a la clase .active cuando cambiamos slides (páginas) con ayuda de elementos .pvev/.next
change – esta función obtiene un parámetro cuando pasamos las páginas – el número de slide actual
También hay algunas opciones adicionales que puede configurar:

var deflt={
    speed:1000, // la  velocidad de animación en ms, o /lento/medio/rápido
    next:'', // clase para el botón 'siguiente'
    prev:'', // clase para el botón 'antecedente'
    links:'', // selector que  define que un vínculo se asigna a id de slide. Por ejemplo  a[rel=slide]    
last:'', // define el número de la última página mostrada al pulsar el botón 'siguiente'
    borders: // si hay una frontera (border) asignada a slides, es posible que aparezca un espacio igual a n (número de slide) * border width (ancho de la frontera). Hay que definir border en píxeles para evitar este "efecto"
}

HTML

Aquí puede revisar la representación general de script HTML:
Esta es la sección con los botones de menú y botones PREV / NEXT

Home Page

Y el bloque con las páginas

CSS

.pages class width debe ser mayor o igual al ancho total de sus elementos secundario
.page class width debe ser 100/n, n es el número total de slides
Así que para 4 slides (páginas) obtendremos el siguiente código css:

.page{
    float:left;
    width:25%;
    height:100%;
    position:relative;
}

.pages{
    width:400%;
    height:100%;
    position:relative;
}
jQuery Slider "SliderPager", 1.0 out of 5 based on 1 rating
  • gabriella

    cool