Menu Carrusel foto JQuery

Posteado el 01. Feb, 2011 por in Jquery

Aqui les dejamos como hacer un carrusel de fotos con JQuery.

Puedes ver el demo en linea en este link de lo que te enseñaremos a hacer

PASO 1
Creamos una carpeta nueva llamada carousel dentro de la cual vamos a crear una capeta llamada imágenes donde vamos a colocar las imágenes que vamos a utilizar en nuestro tutorial.

Carrusel JQuery

PASO 2
Abrimos Adobe Dreamweaver y creamos un nuevo documento HTML.

Carrusel JQuery

PASO 3
Debajo de la etiqueta Carousel Infinito con Jquery vamos a copiar el siguiente código html4strict.

<link href="css/estilo.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.js"></script>
 
<script type="text/javascript">
 
$.fn.infiniteCarousel = function () {
 
    function repeat(str, num) {
        return new Array( num + 1 ).join( str );
    }
 
    return this.each(function () {
        var $wrapper = $('> div', this).css('overflow', 'hidden'),
            $slider = $wrapper.find('> ul'),
            $items = $slider.find('> li'),
            $single = $items.filter(':first'),
 
            singleWidth = $single.outerWidth(),
            visible = Math.ceil($wrapper.innerWidth() / singleWidth), // note: doesn't include padding or border
            currentPage = 1,
            pages = Math.ceil($items.length / visible);            
 
        // 1. Pad so that 'visible' number will always be seen, otherwise create empty items
        if (($items.length % visible) != 0) {
            $slider.append(repeat('<li class="empty" />', visible - ($items.length % visible)));
            $items = $slider.find('> li');
        }
 
        // 2. Top and tail the list with 'visible' number of items, top has the last section, and tail has the first
        $items.filter(':first').before($items.slice(- visible).clone().addClass('cloned'));
        $items.filter(':last').after($items.slice(0, visible).clone().addClass('cloned'));
        $items = $slider.find('> li'); // reselect
 
        // 3. Set the left position to the first 'real' item
        $wrapper.scrollLeft(singleWidth * visible);
 
        // 4. paging function
        function gotoPage(page) {
            var dir = page < currentPage ? -1 : 1,
                n = Math.abs(currentPage - page),
                left = singleWidth * dir * visible * n;
 
            $wrapper.filter(':not(:animated)').animate({
                scrollLeft : '+=' + left
            }, 500, function () {
                if (page == 0) {
                    $wrapper.scrollLeft(singleWidth * visible * pages);
                    page = pages;
                } else if (page > pages) {
                    $wrapper.scrollLeft(singleWidth * visible);
                    // reset back to start position
                    page = 1;
                } 
 
                currentPage = page;
            });                
 
            return false;
        }
 
        $wrapper.after('<a class="arrow back">&lt;</a><a class="arrow forward">&gt;</a>');
 
        // 5. Bind to the forward and back buttons
        $('a.back', this).click(function () {
            return gotoPage(currentPage - 1);
        });
 
        $('a.forward', this).click(function () {
            return gotoPage(currentPage + 1);
        });
 
        // create a public interface to move to a specific page
        $(this).bind('goto', function (event, page) {
            gotoPage(page);
        });
    });
};
 
$(document).ready(function () {
  $('.infiniteCarousel').infiniteCarousel();
});
</script>

Carrusel JQuery

PASO 4
Presionamos el comando Ctrl + S y guardamos nuestro documento HTML con el nombre carousel.html

Carrusel JQuery

PASO 5
Ahora vamos al menú File – New y creamos un nuevo documento CSS.

Carrusel JQuery

PASO 6
Dentro del documento copiamos el siguiente código CSS.

body { font: 1em "Trebuchet MS", verdana, arial, sans-serif; font-size: 100%; }
input, textarea { font-family: Arial; font-size: 125%; padding: 7px; }
label { display: block; } 
 
.infiniteCarousel {
  width: 500px;
  position: relative;
}
 
.infiniteCarousel .wrapper {
  width: 420px; /* .infiniteCarousel width - (.wrapper margin-left + .wrapper margin-right) */
  overflow: auto;
  min-height: 10em;
  margin: 0 40px;
  position: absolute;
  top: 0;
}
 
.infiniteCarousel ul a img {
  border: 5px solid #000;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}
 
.infiniteCarousel .wrapper ul {
  width: 9999px;
  list-style-image:none;
  list-style-position:outside;
  list-style-type:none;
  margin:0;
  padding:0;
  position: absolute;
  top: 0;
}
 
.infiniteCarousel ul li {
  display:block;
  float:left;
  padding: 10px;
  height: 85px;
  width: 85px;
}
 
.infiniteCarousel ul li a img {
  display:block;
}
 
.infiniteCarousel .arrow {
	display: block;
	height: 36px;
	width: 37px;
	text-indent: -999px;
	position: absolute;
	top: 37px;
	cursor: pointer;
	background-image: url(../imagenes/arrow.png);
	background-repeat: no-repeat;
	background-position: 0 0;
}
 
.infiniteCarousel .forward {
  background-position: 0 0;
  right: 0;
}
 
.infiniteCarousel .back {
  background-position: 0 -72px;
  left: 0;
}
 
.infiniteCarousel .forward:hover {
  background-position: 0 -36px;
}
 
.infiniteCarousel .back:hover {
  background-position: 0 -108px;
}
 
#carouselc {
	height: 500px;
	width: 500px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}

Carrusel JQuery

PASO 7
Presionamos el comando Ctrl + S y guardamos nuestro documento dentro de la carpeta css con el nombre estilo.css

Carrusel JQuery

PASO 8
Regresamos a nuestro documento HTML y dentro de las etiquetas copiamos el siguiente código html4strict.

<div class="carouselc" id="carouselc">
<h1>Infinite Carousel</h1>
 
<div class="Carousel Infinito">
  <div style="overflow: hidden;" class="wrapper">
    <ul>
      <li class="cloned"><a href="http://www.tutorialesenlaweb.com" title="Tutoriales en la Web"><img src="imagenes/1.jpg" alt="Tutoriales en la web" width="85" height="85"></a></li>
 
          <li class="cloned"><a href="http://www.tutorialesenlaweb.com" title="Tutoriales en la Web"><img src="imagenes/2.jpg" alt="Tutoriales en la web" width="85" height="85"></a></li>
 
          <li><a href="http://www.tutorialesenlaweb.com" title="Tutoriales en la Web"><img src="imagenes/3.jpg" alt="Tutoriales en la web" width="85" height="85"></a></li>
 
          <li><a href="http://www.tutorialesenlaweb.com" title="Tutoriales en la Web"><img src="imagenes/4.jpg" alt="Tutoriales en la web" width="85" height="85"></a></li>
 
          <li><a href="http://www.tutorialesenlaweb.com" title="Tutoriales en la Web"><img src="imagenes/5.jpg" alt="Tutoriales en la web" width="85" height="85"></a></li>
 
          <li><a href="http://www.tutorialesenlaweb.com" title="Tutoriales en la Web"><img src="imagenes/6.jpg" alt="Tutoriales en la web" width="85" height="85"></a></li>
 
          <li><a href="http://www.tutorialesenlaweb.com" title="Tutoriales en la Web"><img src="imagenes/7.jpg" alt="Tutoriales en la web" width="85" height="85"></a></li>
 
          <li><a href="http://www.tutorialesenlaweb.com" title="Tutoriales en la Web"><img src="imagenes/8.jpg" alt="Tutoriales en la web" width="85" height="85"></a></li>
 
          <li><a href="http://www.tutorialesenlaweb.com" title="Tutoriales en la Web"><img src="imagenes/9.jpg" alt="Tutoriales en la web" width="85" height="85"></a></li>
 
          <li><a href="http://www.tutorialesenlaweb.com" title="Tutoriales en la Web"><img src="imagenes/10.jpg" alt="Tutoriales en la web" width="85" height="85"></a></li>
 
        <li class="cloned"><a href="http://www.tutorialesenlaweb.com" title="Tutoriales en la Web"><img src="imagenes/12.jpg" alt="Tutoriales en la web" width="85" height="85"></a></li>
 
        <li class="cloned"><a href="http://www.tutorialesenlaweb.com" title="Tutoriales en la Web"><img src="imagenes/13.jpg" alt="Tutoriales en la web" width="85" height="85"></a></li>
    </ul>
      </div><a class="arrow back">&lt;</a><a class="arrow forward">&gt;</a>
</div>
</div>

Carrusel JQuery

PASO 9
Por ultimo creamos una carpeta nueva llamada js donde vamos a copiar el archivo js que adjunto en este tutorial.

Carrusel JQuery

PASO 10
Listo ya tenemos nuestro tutorial terminado.

Carrusel JQuery

Descarga el editable de Menu Carrusel Jquery

<a href=”http://www.tutorialesenlaweb.com/wp-content/download/dreamweaver/thehobbitmovie/”><img class=”aligncenter” title=”demo en linea” src=”http://www.tutorialesenlaweb.com/wp-content/uploads/2010/03/demoenlinea18.png” alt=”” width=”239″ height=”76″ /></a>


Tags: , ,

22 Respuestas para “Menu Carrusel foto JQuery”

  1. Ulises Bolivar

    02. Feb, 2011

    interesante gracias por el aporte

  2. WANDER

    14. Feb, 2011

    MUCHAS GRACIAS POR EL ESFUERZO Y LAS GANAS DE DAR A CONOCER TUS CONOCIMIENTOS, ESO ES REALMENTE MUY ALTRUISTA DE TU PARTE Y ADMIRABLE. PERO TENGO UNA PEQUEÑA ACLARACION, AL DESCARGAR EL ARCHIVO, EL ARCHIVO NO ESTA DISPONIBLE, POR QUE SE DESCARGA OTRO ARCHIVO “THE HOBBIT_MOVIE” REALMENTE TE AGRADECERE EN EL ALMA SI SOLUCIONA EL PROBLEMA O SI ME LO MANDA A MI CORREO wander031180@gmail.com te lo agradecere ya que es de suma importancia para mi, poder entender mejor este tutorial. gracia por tu gran trabajo!

  3. Raul

    22. Feb, 2011

    Muchas gracias tb por el tutorial, pero al descargar el archivo .js tampoco se me descarga ya que tienes archivos de Hobbit, sería un gran favor para mí si me lo mandases tb a mi email raul_fdez83@hotmail.com
    Muchas gracias.

  4. creativo

    23. Feb, 2011

    Raul ya esta arreglado el link para descargar el archivo.

    Saludos ;)

  5. Mauricio reyes

    21. Apr, 2011

    Exelente tu tutorial sólo que tengo un problema con el CSS no me funciona para internet explorer segui todos tu pasos pero en firefox y chrome sin problema .

    ojala me puedas ayudar con este problema

    Saludos

  6. Josue Rojas

    13. May, 2011

    Buenas tardes muchas gracias por este trabajo sin embargo cuando lo llevo a dreamweaver no funciona, estoy usando internet explorer

  7. tuto

    14. May, 2011

    probaste con firefox? igual lo vamos a revisar

  8. AbdulNaza

    16. May, 2011

    Excelente muchas gracias por el aporte, lo probe y funsiono bien en Explorer, Firefox y Crome.

    Gracias de nuevo por estar aquí y darnos de sus conocimiento.

    Un saludo grande.

  9. creativo

    16. May, 2011

    AbdulNaza que bueno que te funcionó bien el tutorial.

    Saludos ;)

  10. Omar

    02. Jul, 2011

    no se a ustedes pero ami solo me salen las imagenes hacia abajo y nada parecido con el demo que presenta este tipo…
    y uso firefox

  11. tonyman

    02. Sep, 2011

    xevere graxias justo lo utilice para un trabajo graxias x el aport

  12. Manu

    10. Sep, 2011

    Hola,
    Quisiera incluir el carousel de tu tutorial en una web que estoy haciendo. Sigo uno por uno todos los pasos del tutorial pero cuando le doy a vista en diseño no me sale nada. Ademas me aparece un mensaje en resumen de la seleccion que dice asi: Ninguna de las propiedas CSS se aplica a la seleccion actual. No se si es que no he insertado en el sitio adecuado el código del paso nº 8:

    PASO 8
    Regresamos a nuestro documento HTML y dentro de las etiquetas copiamos el siguiente código html4strict.

    No se a que te refieres cuando dices: ..dentro de las etiquetas copiamos.. No son las etiquetas las que vamos a copiar o es que hay que ir a unas etiquetas especificas que yo no veo?
    No se! Disculpa mi ignorancia. Estaré muy agradecido de que me contestes. Un saludo,
    Manu

  13. Manu

    10. Sep, 2011

    Hola de nuevo, soy manu.
    No se exactamente como lo he hecho :) pero ahora ya me aparece en vista de diseño, el problema que tengo ahora es que me salen las imagenes hacia abajo y me sigue indicando que ninguna de las propiedas CSS se aplica a la seleccion actual. Un saludo,
    Manu

  14. Juan Mamani

    21. Sep, 2011

    Despues de buscar tanto encontré algo practico y funcional. Funciona, pero el js version 1.4.4 que usas hace que no funcione bien un el megamenu de DynamicDrive que usa js 1.5.2
    ¿Alguna sugerencia como solucionarlo?
    Ambos codigos por serparado funcionan perfectamente..

  15. felipe

    10. Feb, 2012

    hola y muxas gracias por compartir estyo con nosotros pero tengo una duda podria yo insertar estos menus en joomla?

  16. Julio Ramos

    20. Feb, 2012

    Muy bueno, todo funciona bien. ¿Me podría enseñar como hacer carrusel 3d circulares?

    Saludos y gracias por el aporte

  17. Webi

    06. Mar, 2012

    DE nada

  18. Lucas Dominguez

    20. Mar, 2012

    Hola.. joya.. me quedo de 10… una pregunta como hago para que sea mas largo? y no que me muestre de a 4 imagenes?

  19. Sónia

    06. Apr, 2012

    Muy buena y felicidades por el tutorial. Esta bastante claro y facil de aplicar.
    Tengo un problema, he hecho los paso indicados, pero el resultado fue una lista ordenada de imagenes en vertical.
    No han sido aplicados ni el estilo ni el código.
    ¿Pergunto se faltará añadir o cambiar algo en el DreamweaverCS5, para que reconosca todo?
    Necesito de ayuda urgente.
    Muchas gracias y un saludos.

    Sónia

  20. eidioma

    02. Jun, 2012

    gracias por este tutorial, me lo guardo para mas despues, porque ahora mismo no entiendo nada de jquery , apenas javascript :)

    saludos

  21. ivan

    09. Jul, 2012

    muchas gracias
    muy bueno

  22. Hector

    30. Jan, 2013

    Funciona perfectamente, MUCHAS GRACIAS por el magnifico aporte, soy completamente nuevo en este asunto e inicialmente, no habia desempaquetado el zip y salia el menu en vertical, probablemente a eso se debe alguno de los errores que mencionan, una peticion…como dice el amigo Lucas Dominguez

    : Hola.. joya.. me quedo de 10… una pregunta como hago para que sea mas largo? y no que me muestre de a 4 imagenes?

    Que debemos modificar y en que codigo para mostrar por ejemplo 8 imagenes, o 10, etc..

    De antemano, gracias por todo, eres una buena persona.

Deja tu Comentario

Tutoriales en la web se reserva el derecho de moderación de los comentarios. Evita por favor utilizar palabras soeces, ataques directos e insultos, de lo contrario tu comentario será eliminado.

Hire PHP Developer India
Get Adobe Flash player