CarouFredSel
jQuery carouFredSel es un plugin que convierte cualquier tipo de elemento HTML en un carrusel. Puede desplazarse por los elementos de uno o varios simultáneamente, horizontales o verticales, infinito y circular, de forma automática o por la interacción del usuario.
También puedes crear con él sliders de imágenes o contenido HTML e incluso galerías.
El carouFredSel-plugin ha sido desarrollado usando la biblioteca jQuery, puedes usarlo en tu blog o sitio web en cualquier tipo de servidor de hosting gestionado.
Características
- Completamente adaptable y personalizable.
- Se desplaza de forma automática o mediante el uso de botones, llaves, la rueda del ratón o mediante el escaneo.
- Soporta variables ITEM-tamaños (también con un número variable de elementos visibles)
- Permite navegación y paginación con el teclado y el ratón.
- 7 efectos incorporados: ninguno, desplazamiento, directscroll, fundido, fundido, tapar y destapar.
- Inteligentes eventos personalizados y un montón de opciones.
- Alineación (izquierda / centro / derecha) elementos dentro de la anchura disponible / altura.
- Dinámicamente agregar y quitar elementos a / desde el carrusel.
- definir las opciones de configuración después de la creación.
Por ejemplo podríamos crear un carousel de imágenes como el siguiente:
Para añadir este fantástico carousel deberás estar familiarizado con las tecnologias: HTML, CSS y jQuery.
En el <head> de tu página deberás incorporar la librería jquery, el plugin y su llamada:
<script type="text/javascript" language="javascript" src="jquery.js"></script>
<script type="text/javascript" language="javascript" src="jquery.carouFredSel-5.6.4-packed.js"></script>
<script type="text/javascript" language="javascript" src="jquery.touchSwipe.js"></script>
<script type="text/javascript">
$(function() {
$("#foo2").carouFredSel({
circular: true,
infinite: false,
auto : true,
prev : {
button : "#foo2_prev",
key : "left"
},
next : {
button : "#foo2_next",
key : "right"
},
pagination : "#foo2_pag"
});
});
</script>
También serán necesarios algunos estilos CSS:
.image_carousel {
padding: 15px 0 15px 40px;
position: relative;
width:580px;
background: #CCFFFF;
margin:0px auto;
margin-top:25px;
border-radius:5px;
box-shadow: 0 2px 5px #666666;
}
.image_carousel img {
border: 1px solid #ccc;
background-color: white;
padding: 9px;
margin: 7px;
display: block;
float: left;
}
a.prev, a.next {
background: url(images/miscellaneous_sprite.png) no-repeat transparent;
width: 45px;
height: 50px;
display: block;
position: absolute;
top: 85px;
}
a.prev { left: -22px;
background-position: 0 0; }
a.prev:hover { background-position: 0 -50px; }
a.prev.disabled { background-position: 0 -100px !important; }
a.next { right: -22px;
background-position: -50px 0; }
a.next:hover { background-position: -50px -50px; }
a.next.disabled { background-position: -50px -100px !important; }
a.prev.disabled, a.next.disabled {
cursor: default;
}
a.prev span, a.next span {
display: none;
}
.pagination {
text-align: center;
}
.pagination a {
background: url(images/miscellaneous_sprite.png) 0 -300px no-repeat transparent;
width: 15px;
height: 15px;
margin: 0 5px 0 0;
display: inline-block;
}
.pagination a.selected {
background-position: -25px -300px;
cursor: default;
}
.pagination a span {
display: none;
}
.clearfix {
float: none;
clear: both;
}
Y finalmente dentro del <body> el código HTML:
<div class="image_carousel"> <div id="foo2"> <img src="images/basketball.jpg" alt="basketball" width="140" height="140" /> <img src="images/beachtree.jpg" alt="beachtree" width="140" height="140" /> <img src="images/cupcackes.jpg" alt="cupcackes" width="140" height="140" /> <img src="images/hangmat.jpg" alt="hangmat" width="140" height="140" /> <img src="images/new_york.jpg" alt="new york" width="140" height="140" /> <img src="images/laundry.jpg" alt="laundry" width="140" height="140" /> <img src="images/mom_son.jpg" alt="mom son" width="140" height="140" /> <img src="images/picknick.jpg" alt="picknick" width="140" height="140" /> <img src="images/shoes.jpg" alt="shoes" width="140" height="140" /> <img src="images/paris.jpg" alt="paris" width="140" height="140" /> <img src="images/sunbading.jpg" alt="sunbading" width="140" height="140" /> <img src="images/yellow_couple.jpg" alt="yellow couple" width="140" height="140" /> </div> <div class="clearfix"></div> <a class="prev" id="foo2_prev" href="#"><span>prev</span></a> <a class="next" id="foo2_next" href="#"><span>next</span></a> <div class="pagination" id="foo2_pag"></div> </div>
Ver ejemplo de carosuel en marcha
Ver más documentación, descarga y más ejemplos
Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
¿Buscas trabajo de programador?
4 respuestas a “CarouFredSel”
Deja una respuesta
57 artículos que te podrían interesar
Hola, he tenido problemas para poner las imágenes de abajo, las flechas ya las puse y también tengo problemas para poner un tiempo especifico para que haga los cambios.
Te agradezco mucho.
Todas las posibilidades del carousel está en: http://caroufredsel.dev7studios.com/configuration.php
En primer lugar enhorabuena por tu blog, es muy interesante lo que pones y está muy bien.
En segundo lugar me gustaría pedirte un poco de ayuda, sobre el tema de este post. Por más que lo estoy buscando, no sé cómo resolverlo.
Después de buscar unos cuantos carruseles, para una web que estoy haciendo, en wordpress, éste sin duda es el que me ha convencido, también porque lo explicas muy bien. He hecho una adpatación para WP, y he customizado unas cuantas cosas, y ya lo tengo funcionando, exceptuando algo que no encuentro. Son los sprites, o las imágenes de las flechas, y los puntitos que hay debajo. Está establecido, claro, porque los divs están, y los códigos también, pero los backgrounds de imágenes no. Por más que busco en el site del plugin, y en todos los lados, no las encuentro para poderlas incorporar en mi carpeta de imágenes, y en el carrusel.
He pensado en hacerlas yo, pero claro, es un sprite, y me puede resultar complicado por las medidas a escoger aunque me gustaría personalizarlas, no lo es lo mismo sin medidas que con ellas para hacerlas. Veo que a ti te han salido, y las tienes, por eso te pido ayuda, a ver cómo te ha salido a ti, y el porqué a mí no… no lo llego a entender, no sé si es por wordpress o qué, y he hecho y he buscado de todo.
A ver si puedes resolverme el problema, o decirme por lo menos cómo lo has hecho tú…
Gracias anticipadas.
Hola de nuevo, no te preocupes en publicar el comentario ni en responder. Ya lo he arreglado, haciendo yo misma las imágenes. Tenía que haberlo hecho desde el principio así, he perdido mucho tiempo buscando…
Saludos.