Hola me gustaria instalar un carrusel de imagenes en mi web, pero soy bastante novato y me preguntaba si alguien me podría ayudar ya que por mas que lo intento no hay manera.
Tengo un codigo html que contiene la hoja de estilo y el javascript, luego tengo otro archivo .js al que enlaza, hasta hay perfecto, lo pruebo con dreamweaver y todo ok, el problema esta en que no se ni donde ni como insertarlo para que aparezca en la pagina principal.
Tengo un codigo html que contiene la hoja de estilo y el javascript, luego tengo otro archivo .js al que enlaza, hasta hay perfecto, lo pruebo con dreamweaver y todo ok, el problema esta en que no se ni donde ni como insertarlo para que aparezca en la pagina principal.
0
Puntos
Puntos
2255
Visitas
Visitas
4
Resp
Resp
Por zerodarck hace 12 años
Master
Respuesta #1
insertalo con un include en la parte del codigo donde quieras
0
Puntos
Puntos
Por borch hace 12 años
Developer
Respuesta #2
hola que tal
sino te importa pon el codigo haber que le echemos un vistazo...
sino te importa pon el codigo haber que le echemos un vistazo...
0
Puntos
Puntos
Por graficaslucero hace 12 años
Novice
Respuesta #3
no tengo ningun codigo es por eso que busco ayuda necesito un carrusel de imagenes que sea facil de instalar en mi web, aun así gracias por las respuestas
0
Puntos
Puntos
Por zerodarck hace 12 años
Master
Respuesta #4
puedes usar este es muy sencillo de entender y utilizar
HTML
HTML
<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> <!– /slidesContainer –> </div> <!– /slider –>CSS
#slide{
width: 600px;
height: 350px;
overflow: hidden;
position: relative;
}
.slide{
width: 600px;
height: 350px;
float: left;
}JAVASCRIPT/*
* Tutorial Easy slider
* Autor: Osiris Magro
* Fecha: 15/02/2010
* Compártelo como quieras
*/
$(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');}, 5000);
}
/*
* 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();
});Demo http://innominepixel.host22.com/demos/easy%20slider/0
Puntos
Puntos
Por alber hace 11 años
Admin