Como poner muchas fotos en un carrusel htlm
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
2298
Visitas
Visitas
4
Resp
Resp
Por zerodarck hace 127 meses
Experto
Respuesta #1
insertalo con un include en la parte del codigo donde quieras
0
Puntos
Puntos
Por borch hace 127 meses
Avanzado
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 127 meses
Principiante
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 127 meses
Experto
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 123 meses
Administrador