CARRUSEL DE IMAGENES ( FACIL DE CREARLO ).
CARRUSEL DE IMAGENES
Este carrusel es de funcinamiento continuo, tiempo de transaccion se establece en 12 s.
El tamaño se adapta al que tu le coloques (todas las imagenes deben ser del mismo tamaño)
Utiliza Css3 y Javascrip.
Esto no solamente es para jimdo es para cualquier tipo de sitio simplemente que tengas acceso al
<head></head> del sitio. Para pasarlo a tu web sigue los siguientes pasos.
PASO 1: Dirigete al <head></head> de tu pagina (en jimdo inicia secion ve a Ajustes -Editar head )
copeas los Estilos CSS que los encontraras abajo y los pegas dentro y lo mismo con el codigo Javascript
van seguidos uno del otro( y guardas los cambios).
PASO 2: Copia el codigo html en el <body></body> (en jimdo vas a Insertar nuevo elemento - Widget/html y lo pegas en el espacio en blanco) luego pasamos a ingresar las URL de las imagenes en en lugar donde se te indica marcado con rojo.
INDICACION: Preferentemente coloca imagenes todas de un solo tamaño y define en el codigo ese tamaño que deseas, para colocar mas imagenes repite* la etiqueta li ( <li><img width="400" height="215" alt="" src="image1.jpg" /></li> ) cuantas veces quieras o viseversa, si quieres menos elima*.
ESTILOS CSS:
<style type="text/css">
/*<![CDATA[*/
<!--
div.ic_myCarousel {
margin: 20px auto 0 auto;
clear:right;
}
.infiniteCarousel {
box-shadow: 0px 3px 3px #333;
border: 3px solid #333;
}
.ic_left_nav, .ic_right_nav {
display: none;
}
-->
/*]]>*/
</style>
CODIGO JAVASCRIPT:
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://www.catchmyfame.com/jquery/infinitecarousel3/jquery.infinitecarousel3.min.js"></script>
<script type="text/javascript" src="http://www.catchmyfame.com/jquery/infinitecarousel3/easing.js"></script>
<script>
var a = jQuery.noConflict();
a(document).ready(function() {
a('#carousel').infiniteCarousel({
transitionSpeed:12000, /*Tiempo de avance de las imagenes*/
displayTime: 2000, /* El tiempo en milisegundos para hacer pausa*/
thumbnailType: 'false',
customClass: 'myCarousel',
easeLeft: 'linear',
easeRight:'linear',
inView: 1, /*Imagenes mostradas*/
advance: true,
autoPilot: true,
displayProgressRing: true, /*muestra grafica del tiempo que pausa la imagen*/
});
});
</script>
CODIGO HTML:
<ul id="carousel">
<li><img width="600" height="338" alt="" src="http://www.catchmyfame.com/jquery/infinitecarousel3/demo/p7.jpg" /></li>
<li><img width="600" height="338" alt="" src="http://www.catchmyfame.com/jquery/infinitecarousel3/demo/p8.jpg" /></li>
<li><img width="600" height="338" alt="" src="http://www.catchmyfame.com/jquery/infinitecarousel3/demo/p7.jpg" /></li>
<li><img width="600" height="338" alt="" src="http://www.catchmyfame.com/jquery/infinitecarousel3/demo/p8.jpg" /></li>
</ul>
luis (domingo, 22 octubre 2017 00:58)
hola buen dia, tengo una duda , se puede en lugar de una imagen solo poner un titulo y texto en un solo cuadro
notoyontoy (jueves, 28 septiembre 2017 16:00)
Hola Jose Reyes , no entiendo como sucede eso? como has probado que en otros equipos no funciona,
Jose Reyes (lunes, 25 septiembre 2017 12:06)
Estimado, el carrousel funciona perfecto en mi pc, pero en otros computadores me queda como tira de imagenes. cual sera el problema?
notoyontoy (martes, 13 junio 2017 23:22)
Hola Camilo Escobar para mostrar los controles next prev y eliminar el contador de tiempo debes cambiar el codigo sript por el siguiente:
<script>
var a = jQuery.noConflict();
a(document).ready(function() {
a('#carousel').infiniteCarousel({
transitionSpeed:270, /*Tiempo de avance de las imagenes*/
displayProgressRing: false, /*muestra grafica del tiempo que pausa la imagen*/
showControls: false,/*boton play pause*/
imagePath: 'http://www.catchmyfame.com/jquery/infinitecarousel3/images/'
});
});
</script>
y eliminar la etiqueta siguiente que veras en la hoja de estlos css:
.ic_left_nav, .ic_right_nav {
display: none;
}
por ultimo siento decirte que no es responsive, pero he compartido un slider nuevo con las caracteristicas que buscas y si es responsive puedes buscar en mi seccion blog o pega este enlace en tu navegador:
https://notoyontoy.jimdo.com/2017/06/12/slider-de-imagenes-3d/
suscribete a mi canal de youtube y dale like a mi pagina de facebook para estar pendiente de los nuevos articulos del blog
si tienes mas dudas comentalas, saludos!
Camilo Escobar (martes, 13 junio 2017 22:12)
Hola chico el carrusel funciona perfecto, aqui metiendole mano logre que no corriera por si solo, pero mi pregunta es :
Como elimino el piloto que sale en la esquina superior derecha?
Como le coloco unas flechas o imágenes a los iconos que salen en los laterales ? s, osea de forma manual el usuario puede hacer rodar el carrusel, pero salen icono de hojas rotas, quisiera colocarlas unas flechas.
hay forma de que el carrusel sea responsive? soy muy nuevo en esto
notoyontoy (martes, 06 junio 2017 19:12)
Hola Fabi en el codigo html debes indicar las medidas que tienen tus imagenes, el codigo tiene indicado las medidas de 600x338 si no las cambiaste todas se veran de esa medida, espero esto responda tu pregunta, alguna otra duda comentala, Saludos.
fabi (martes, 06 junio 2017 17:14)
hola oye de que tamaño son las imagenes es que las pongo en 800x400 y salen en el carusel pequeñas
notoyontoy (jueves, 01 junio 2017 20:24)
Lo siento hacia falta una llave de cierre para el codigo script, gracias por informar
leo (jueves, 01 junio 2017 13:36)
hola, el codigo volvio a andar mal, pueden decirnos la nueva direccion?
gracias
Jose Maria (viernes, 12 mayo 2017 07:19)
Hola, el carrusel funciona perfctamente. Ahora quiero poner una linea de texto fija sobre todas las imágenes con la etiqueta tspan pero no se donde ponerlo en el código.
notoyontoy (miércoles, 10 mayo 2017 20:56)
Gracias por comentarlo Michael, ahora ya esta solucionado.
Saludos
Michael (miércoles, 10 mayo 2017 09:42)
Este codigo esta caido:
<script src="http://notoyontoy.site40.net/Js/jquery.infinitecarousel3.min.js"></script>
Ya no corre el carrusel, alguna solucion ?
michael.brpa@gmail.com
Yamile (domingo, 23 octubre 2016 13:16)
aaaaaaaaaaa
notoyontoy (domingo, 02 octubre 2016 01:21)
Hola Francisco el carrusel no esta diseñado para actuar de forma responsasive , Saludos!
notoyontoy (domingo, 02 octubre 2016 01:19)
Hola javo podrias cambiar la variante "a" en el codigo java script cambiala por alguna otra letra o por ejemplo usa una palabra "carru" asi:
var carru = jQuery.noConflict();
carru(document).ready(function() {
carru('#carousel').infiniteCarousel({
Espero te sirva saludos
Francisco Rodriguez (domingo, 25 septiembre 2016)
Esta muy bueno y funciona correctamente, solo quisiera saber si es posible volver el carrusel responsive.
Javo (martes, 20 septiembre 2016 21:15)
El carrusel me funciona perfecto, gracias, pero me bloquea todos los links a otras páginas, es decir mis etiquetas <a href.... quedan deshabilitadas. Qué hacer?
notoyontoy (jueves, 07 julio 2016 21:16)
Exacto! por eso hice otro articulo sobre este carrusel es el siguiente, puedes checarlo si quieres. Saludos
http://notoyontoy.jimdo.com/2015/12/13/carrusel-de-imagenes-f%C3%A1cil-de-crearlo/
Ricardo Rodriguez (jueves, 07 julio 2016 16:57)
Amigo no se ven las fechas en el carrusel
Alan (domingo, 29 mayo 2016 14:12)
Me ayudó muchísimo, muchas gracias
Nico (domingo, 08 mayo 2016 09:58)
Hola, he copiado el código tal cual lo tienes y me funciona perfectamente en Internet explorer y en Mozilla, pero en google chrome no me sale en vez de salir el carrusel me sale con miniatura.
¿Qué debo hacer?
notoyontoy (martes, 26 abril 2016 21:59)
hola Rodolfo puedes cambair el tamaño con cualquier editor de fotos puede ser con paint.
El beneficio de este carrusel es que puedes cambiar su tamaño desde el codigo html sin cambiar nada en el css o el javascript, las imagenes tuyas deben tener la medida final exacta que tendrá el carrusel.
Rodolfo (martes, 26 abril 2016 00:55)
Oye como modificas el tamaño de la imagen para que quepa en el carrusel o sea hacer mas grande o mas chica la imagen. saludos
notoyontoy (viernes, 01 abril 2016 22:51)
Hola emanuel castrillon obviamente en el carrusel indicamos la ruta de las imagenes osea el link para que las imagenes se muestren en tu sitio web (en la nube) deben estar alojadas en algun servidor, si has descargado las imagenes deberas subirlas a un sitio de almacenamiento y de ahi obtener el link, el ejemplo esta en el codigo html dentro de cada etiqueta img tenemos un atributo src y dentro de las comillas estas el link de cada imagen. Si tiene un sitio en jimdo como este las herramientas que tienes son adecuaadas elige un modulo y das click en el de subir imagenes y subes las que necesitas despues das click derecho sobre cada una de ellas para obtener el link, ruta o enlace de la imagen.
te invito a ver este articulo similar, Saludos!
http://notoyontoy.jimdo.com/2015/12/13/carrusel-de-imagenes-f%C3%A1cil-de-crearlo/
emanuel castrillon (viernes, 01 abril 2016 08:08)
si sirve pero como lo puedo poner con imágenes descargadas?
German Garzon Acero (miércoles, 09 marzo 2016 11:09)
Jueputa mierda no sirve gonorrea
Notoyontoy (domingo, 29 noviembre 2015 19:06)
Hola Eduardo el Carrusel tiene margen en la parte superior de 20 pixeles, en la parte inferior de 0 pixeles y a los lados esta en auto lo que indica que debe quedar al centro de tu pagina, cambia el tamaño de tus imagenes en el editor de PAINT por una de menor tamaño con esto tambien ayudarias a que tu pagina web pese menos. Saludos!
Notoyontoy (domingo, 29 noviembre 2015 18:18)
Hola Angel para mas informacion visita la pagina http://www.catchmyfame.com/catchmyfame-jquery-plugins/jquery-infinite-carousel-plugin/ ahí se encuentra la informacion completa de este Carousel incluyendo un enlace para descargar todos los archivos. Saludos!
Notoyontoy (domingo, 29 noviembre 2015 18:06)
Hola Noemi para centrar el carrusel usa la etiqueta CENTER en el codigo html:
<center>
<ul id="carousel">
<li><img width="400" height="300" alt="" src="image1.jpg" /></li>
<li><img width="400" height="300" alt="" src="image2.jpg" /></li>
</ul>
</center>
Eduardo (domingo, 29 noviembre 2015 15:45)
AMIGO PARA MOVER EL CARRUSEL DE POSICION EN LA PAGINA WEB?
angel (domingo, 29 noviembre 2015 00:05)
me surgio otra duda jaja o bueno dos...
si yo quiero que en un principio esten a la vista 3 imagenes, no es posible hacerlo de forma centrada sin tener que poner un margen que me deje un vacio en blanco? es decir centrar la imagen sin necesidad de mover la posicion del carrusel. por ejemplo:
siendo la flecha el sentido en que se mueve el carrusel:
no es posible que me quede:
<------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
la parte final de la imagen izq / la imagen central que se ve completa / y la parte del comienzo de la dere
de manera que no me quede:
<-------------------------------------------------------------------------------------------------------------------------------------------------------------------
espacion en blanco / la imagen central que se ve completa / y la parte del comienzo de la dere
la otra duda es que cuando activo el valor true del metodo 'prevNextInternal' puedo hacer uso de el pero no salen las flechas es decir sale el documento roto que simboliza que alli deberia ir una imagen tipo flecha o algo, mi duda es como puedo ponerle ese fondo a los prev y next?
gracias de antemano
angel (sábado, 28 noviembre 2015 23:15)
olvidalo ya lo resolvi con el uso de la propiedad max-width aplicada directamente sobre el carrusel, excellente aporte por cierto
angel (sábado, 28 noviembre 2015 23:09)
hola tengo una duda, uso 8 imagenes son de 600x600 se ven de dos a la ves pero como el carrusel es lineal el resto de imagenes que vienen de derecha a izq pero que no estan en la visual al momento se encuentran sobrepasando el limite derecho de la pagina como tal, es decir me ensancha la pagina. no hay manera de limitar el carrusel al ancho de la pagina y que eso no afecte su funcionamiento?
Noemi (jueves, 26 noviembre 2015 17:26)
Buen día, muy bueno pero no queda centrado en mi pagina como puedo dejarlo centrado.
Alejandro (jueves, 19 noviembre 2015 03:54)
Hola. Quisiera saber como puede poner un carrusel en la página www.alejandrosanchezperez.com, con las imágenes de los patrocinadores, de forma que cuando se posiciones el mouse se detenga unos tres segundos. La web está hecha con Jimdo. Muchas gracias
Gustavo (miércoles, 09 septiembre 2015 12:07)
Hola. ¿Como puedo hacer para que cuando apoye la flecha del mouse en una foto se detenga el carrusel y cuando la saco vuelva a avanzar?
Alexander (martes, 14 julio 2015 09:30)
El carrusel si puede hacer pausa, para eso es la propiedad displayTime, por defecto esta en 0 deben poner el tiempo que deseen que sea la pausa en mili-segundos; por ejemplo, si quieren que la pausa sea de 2 segundos deberían poner 2000
juank (lunes, 20 abril 2015 04:56)
hola quisiera saber si al carrusel se le puede modificar el estilo de transición pues el que tiene es como slider no se si tal vez existan otros estilos de transición compatible con este carrusel gracias.
Oscar (miércoles, 08 abril 2015 03:20)
Hola si no tengo internet no se puede ver? por q lo pruebo en una maquina donde no tengo internet y solo ven las imagenes como en la lista estaticas, y lo pruebo en una con internet y si se ve muy bien el carrusel esto a que se debera?
muchas gracias buen aporte
notoyontoy (martes, 31 marzo 2015 05:35)
Hola DR3YCKO para que el carrusel se ajuste a tus imagenes tienes que dar la orden en la etiqueta img que es la siguiente:
<li><img width="400" height="300" alt="" src="image1.jpg" /></li>
allí colocas las medidas de tus imagenes si son de 200x100 quedaría así:
<li><img width="200" height="100" alt="" src="image1.jpg" /></li>
Gracias por tu comentario, Saludos :)
DR3YCKO (lunes, 30 marzo 2015 20:55)
muchas felicidades por tu trabajo, tengo una pregunta como quito los espacios entre las imágenes ya que al momento de ingresar las mias el espacio que hay entre ellas es muy grande, mis imágenes son de 200 x 100 px. te agradecería tu atención, Saludos
gil (viernes, 06 marzo 2015 17:05)
no entiendo muy bie el jquery
gil (viernes, 06 marzo 2015 17:04)
no me funciona
boupellconsultores (martes, 11 noviembre 2014 00:49)
Hola, no me deja correr el carrusel, sólo se quedan estáticas las imágenes ya en la vista previa
notoyontoy (sábado, 01 noviembre 2014 16:48)
Hola Juan Carlos claro que si solo agrega a las imágenes la etiqueta correspondiente que es la siguiente y quedará así:
<li><a href="URL-DE-PAGINA" traget="blank"><img width="400" height="300" alt="" src="image1.jpg" /></a></li>
Saludos!
Juan Carlos Dominguez Infante (miércoles, 29 octubre 2014 21:58)
Hola, hay forma de insertar hipervinculos a cada imágen en el carrusel?
notoyontoy (jueves, 02 octubre 2014 03:08)
Hola ERIKA esta es la solucion simplemente es de cambiar las siquientes propiedades en la hoja de estilos CSS por estas:
div.ic_myCarousel {
margin: 0px;
clear:right;
padding: 0px !important;
}
.infiniteCarousel {
border:none;
}
Saludos ;)
notoyontoy (jueves, 02 octubre 2014 02:39)
Hola Rod lo debes pegar <body> aqui </body> en cualquier parte dentro del BODY(cuerpo de la pagina) ya que todo el codigo html que se encuentra dentro de estas etiquetas es lo que permanece visible dentro de tu pagina web .
Ahora que... <body class=" todo lo que encuentres aqui " id=" o aqui "> son claves que se usan para especificar las caracteristicas de esa etiqueta.
ERIKA (jueves, 02 octubre 2014 02:25)
HOLA TE HAGO UNA CONSULTA SI O SI TIENEN QUE TENER UN MARGEN, POR QUE QUIERO QUE SE VEA EN UNA PARTE DE MI WEB OSEA EN UN RECTANGULO LAS IMAGENES PERO, SAQUE LOS BORDES PERO SE CORRE EL RESTO DE LA PAGINA EN DONDE PUEDE ESTAR EL ERROR
GRACIAS !! EXELENTE TUS VIDEOS
Rod (miércoles, 01 octubre 2014 17:58)
Hola cuando te refieres a pegar el html en <body></body> a mi me sale asi <body class="{S_CONTENT_DIRECTION}"> donde exactamente hay que pegarlo? gracias