Bienvenido a datoweb.com!! En este foro podrás encontrar ayuda sobre diseño y desarrollo web en general. Si quieres formar parte de esta comunidad para pedir ayuda o colaborar ayudando a otros usuarios del foro solo tienes que registrarte desde el siguiente enlace: Registrarse en el Foro

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.
0
Puntos
2298
Visitas
4
Resp
Por zerodarck hace 127 meses
Experto
Respuesta #1
insertalo con un include en la parte del codigo donde quieras
0
Puntos
Por borch hace 127 meses
Avanzado
Respuesta #2
hola que tal
sino te importa pon el codigo haber que le echemos un vistazo...
0
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
Por zerodarck hace 127 meses
Experto
Respuesta #4
puedes usar este es muy sencillo de entender y utilizar

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
Por alber hace 123 meses
Administrador
Compartir en facebook
Compartir en twitter
Compartir
Para comentar Inicia sesión o Registrate