Si este tutorial no es lo que necesita y Usted todavía tiene preguntas o sugerencias – póngase en contacto con nosotros. ¡Por favor, ayúdenos a servirle!

Su Nombre

Su Email

Su Mensaje (obligatorio)

captcha

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;
}
  • gabriella

    cool

    No votes yet.
    Please wait...
 
Chat en Vivo
We help you to choose the right product.
Comenzar Chat