- Plantillas Web
- Plantillas E-commerce
- Plantillas de CMS y Blog
- Plantillas Facebook
- Constructor Web
FAQs
General Tutorials
MonsterONE Subscrioption
jQuery Slider “SliderPager”
marzo 17, 2011
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 / NEXTY el bloque con las páginasHome Page
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;
}
