SOLO NECESITAS COLOCAR LA URL DE TUS IMAGENES!
El carrusel trabaja con javascript y jquery, avanza en automatico al seleccionar el carrusel muestra los botones para saltar o retroceder una imagen al darle click a un boton pasa del modo auto a manual , en la parte superior derecha muestra el tiempo en espera de la imagen y un boton para continuar o pausar la visualizacion de imagenes.
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">
html, body {
padding: 0px;
margin: 0px;
}
div.infiniteCarousel {
clear:right;
}
</style>
Código Javascritp:
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://notoyontoy.site40.net/jimdo/infinite-carousel/jquery.infinitecarousel3.min.js"></script>
<script type="text/javascript" src="http://notoyontoy.site40.net/jimdo/infinite-carousel/easing.js"></script>
<script>
$(function(){
$('#carousel').infiniteCarousel({
progressRingColorOpacity: '3,169,244,.85',
autoPilot: true,
easeLeft: 'easeOutExpo',
easeRight:'easeOutQuart',
});
});
</script>
Código HTML:
<ul id="carousel">
<li><img width="640" height="360" alt="" src="img1.jpg" /></li>
<li><img width="640" height="360" alt="" src="img2.jpg" /></li>
<li><img width="640" height="360" alt="" src="img3.jpg" /></li>
<li><img width="640" height="360" alt="" src="img4.jpg" /></li>
<li><img width="640" height="360" alt="" src="img5.jpg" /></li>
</ul>
Escribir comentario
antonio fernandes (lunes, 27 febrero 2017 08:52)
hola amigo me funciona pero los demas links en la pagina no me funcionan
notoyontoy (lunes, 13 marzo 2017 20:32)
Hola Antonio probablemente sea un conflicto con jquery intenta omitir las siguentes lineas en el codigo script
$(function(){
$('#carousel').infiniteCarousel({
Por estas otras de este modo el conflicto con jquery debe resolverse
var a = jQuery.noConflict();
a(document).ready(function() {
a('#carousel').infiniteCarousel({