// ### SLIDER PROPIO ### /* Se trata de un slider personalizado propio, creado por ensten TECHNOLOGIES para utilizarlo en nuestros desarrollos web. */ /* El slider funciona de la siguiente manera: 1) Con jQuery se mueve el último item del slider al principio, por delante del item que se muestra (actual). 2) Cada vez que se hace click, se utiliza jQuery para recolocar todos los items de forma que siempre quede que el anterior por delante del que se ve (actual) */ // Declaración clase eSlider para el slider function eSlider() { /* Del slider necesitamos: · div que contiene al slider (contenedor) · boton next (Der) · boton prev (Izq) · div que contiene a cada item (items) */ this.contenedor = ''; // STRING con el selector css del div que contiene el slider this.slider = ''; // STRING con el selector css del div que es el slider this.items = Array(); // Array con los selectores css de los divs que contienen los items this.botonIzq = 'eSlider_btnIzq'; // STRING con el selector css del div que contiene el boton izquierdo this.botonDer = 'eSlider_btnDer'; // STRING con el selector css del div que contiene el boton derecho this.numItems = 0; // Número de items calculado a partir del número de elementos del array items } // Métodos de la clase: // Este método sirve para trasladar el último item del slider a la primera posición eSlider.prototype.trasladoLtoF = function () { // Recogemos los parámetros del objeto en variables var slider = this.slider; var items = this.items; var recuento = this.numItems; var itemF = items[0]; var itemL = items[recuento-1]; // Movemos el último item al principio $(itemL).insertBefore(itemF); // Para que siga viéndose el primer item y no el último, hay que desplazar este último item hacia la izquierda un -100% $(slider).css('margin-left','-'+100+'%'); // Se tiene que actualizar también el array de items /* Nota: La instrucción splice funciona así: splice ( posicion en el array , numero de elementos a eliminar , elemento a insertar ); */ // Primero se inserta el último item del slider en primera posicion items.splice(0,0,itemL); // Y después se elimina el última item del slider para que no esté repetido items.splice(recuento,1); //En este caso la variable recuento no lleva -1 porque el array está incrementado en 1 }; // Este método sirve para trasladar el primer item del slider a la última posición eSlider.prototype.trasladoFtoL = function () { // Recogemos los parámetros del objeto en variables var slider = this.slider; var items = this.items; var recuento = this.numItems; var itemF = items[0]; var itemL = items[recuento-1]; // Movemos el primer item al final $(itemF).insertAfter(itemL); // Para que siga viéndose el primer item y no el último, hay que desplazar este último item hacia la izquierda un -100% $(slider).css('margin-left','-'+100+'%'); // Se tiene que actualizar también el array de items // Primero se inserta el primer item del slider en la última posicion items.splice(recuento,0,itemF); //En este caso la variable recuento no lleva -1 porque el nuevo elemento se inserta a partir del final // Y después se elimina el primer item del slider para que no esté repetido items.splice(0,1); }; // Este método sirve para mover el slider a la izquierda eSlider.prototype.moverIzq = function () { // Recogemos los parámetros del objeto en variables var slider = this.slider; // Guardamos el objeto en una variable temporal para evitar la confusion con $(this) en las funciones internas de este método var esteObj = this; // Utilizamos la funcion 'animate' para animar la transición entre items // Para que se produzca el cambio de item hacia la izquierda hay que situar el margen izquierdo a -200% (ya estaba al -100%) // La animación tiene una duración establecida de 700 milisegundos $(slider).animate({marginLeft:'-'+200+'%'} , 700 , function() { // Cuando la animación termina se ejecuta una función de callback para reorganizar los items // Para conseguirlo reutilizamos las funciones iniciales para mover los items y cambiar el margen izquierdo esteObj.trasladoFtoL(); }); }; // Este método sirve para mover el slider a la derecha eSlider.prototype.moverDer = function () { // Recogemos los parámetros del objeto en variables var slider = this.slider; // Guardamos el objeto en una variable temporal para evitar la confusion con $(this) en las funciones internas de este método var esteObj = this; // Utilizamos la funcion 'animate' para animar la transición entre items // Para que se produzca el cambio de item hacia la derecha hay que situar el margen izquierdo a 0% // La animación tiene una duración establecida de 700 milisegundos $(slider).animate({marginLeft:0+'%'} , 700 , function() { // Cuando la animación termina se ejecuta una función de callback para reorganizar los items // Para conseguirlo reutilizamos las funciones iniciales para mover los items y cambiar el margen izquierdo esteObj.trasladoLtoF(); }); }; // Este método sirve para crear los botones de control del slider eSlider.prototype.crearBotones = function () { // Recogemos los parámetros del objeto en variables var slider = this.slider; var botonIzq = this.botonIzq; var botonDer = this.botonDer; //var htmlBotones = $('