porque mi galería no los soporta y sería interesante el saber por que.
aqui les dejo el codigo, y muchas gracias.
html
Código HTML :
<div class="sliderContainer"> <a href="#siguiente" class="next" title="Siguiente"></a> <a href="#anterior" class="prev" title="Anterior"></a> <div id="slider"> <div class="slidesContainer"> <div class="slide"><img src="img/img01.jpg" alt="Coche 01" /></div> <div class="slide"><img src="img/img02.jpg" alt="Coche 02" /></div> <div class="slide"><img src="img/img03.jpg" alt="Coche 03" /></div> <div class="slide"><img src="img/img04.jpg" alt="Coche 04" /></div> <div class="slide"><img src="img/img05.jpg" alt="Coche 05" /></div> </div> <!-- /slidesContainer --> </div> <!-- /slider --> </div> <!-- /sliderContainer -->
Código Javascript :
$(document).ready(function(){
/*
* Variables
*/
var slides, timer;
//Crea un objeto con información de los slides
slides = $('#slider .slidesContainer > .slide');
/*
* Funciones
*/
//Desplaza el contenedor hacia la dirección definida
//@direction = [left,right]
function sliderScroll(direction){
//Calcula la posición actual del contenedor
position = $('#slider').scrollLeft();
//Calcula la anchura total menos el último slide.
//Se usa para calcular cuando el scroll llega al final.
totalWidth = (slides.length * slides[0].offsetWidth) - slides[0].offsetWidth
//Se comprueba la variable direction para hacer el scroll hacia izquierda o derecha
switch (direction) {
case 'right': //Derecha
if (position+slides[0].offsetWidth > totalWidth){ //Si la siguiente posición se sale del contenedor, vuelve al principio.
$('#slider:not(:animated)').animate({scrollLeft:0},1000);
} else { //Si no es el final, suma a la posición actual la anchura del slide.
$('#slider:not(:animated)').animate({scrollLeft:position+slides[0].offsetWidth},1000);
}
break;
case 'left': //Izquierda
if (position-slides[0].offsetWidth < 0){ //Si la siguiente posición se sale del contenedor, vuelve al final.
$('#slider:not(:animated)').animate({scrollLeft:totalWidth},1000);
} else { //Si no es el final, resta a la posición actual la anchura del slide.
$('#slider:not(:animated)').animate({scrollLeft:position-slides[0].offsetWidth},1000);
}
break;
}
}
//Función que crea el temporizador
function initTimer(){
timer = setInterval(function(){sliderScroll('right');}, 3000);
}
/*
* Código
*/
//Asigna el ancho total de los slides al contenedor
//La anchura total se obtiene multiplicando la medida de un slide por el número de slides)
$('#slider .slidesContainer').css('width',slides[0].offsetWidth * slides.length);
//Click en el botón "next"
$('.next').click(function(){
clearInterval(timer); //Desactiva el temporizador
sliderScroll('right'); //Mueve el scroll a la derecha
initTimer(); //Vuelve a activar el temporizador
return false;
});
//Click en el botón "prev"
$('.prev').click(function(){
clearInterval(timer); //Desactiva el temporizador
sliderScroll('left'); //Mueve el scroll a la izquierda
initTimer(); //Vuelve a activar el temporizador
return false;
});
//Inicia el temporizador
initTimer();
});
solo quiero ponerle swfs en vez de las imagenes
