Hay ciertas ocasiones en que alguien nos pide un carrusel de imágenes en su página web. Si buscamos un poco es posible que encontremos diferentes librerías que nos permitan crear nuestro carrusel de manera sencilla. Aunque no todas tienen la suficiente flexibilidad. A continuación os voy a mostrar una librería muy flexible en cuanto a sus opciones, lo que nos va a permitir crear interesantes carruseles para nuestros desarrollos web. Esta librería es: carouFredSel.
Lo primero que debemos hacer es descargarnos la librería desde aquí
Una vez que hemos descargado la librería al descomprimir el archivo nos encontramos con varios archivos JavaScript y un archivo HTML con diferentes ejemplos y que nos pueden servir como guía para crear nuestro carrusel.
Vamos pues a crear un carrusel de ejemplo. Primero debemos crear nuestra página web y en la cabecera añadir la inclusión de las librerías.
<html>
<head>
<script type="text/javascript" language="javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript" language="javascript" src="jquery.carouFredSel-6.2.1-packed.js"></script>
</head>
</html>
<head>
<script type="text/javascript" language="javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript" language="javascript" src="jquery.carouFredSel-6.2.1-packed.js"></script>
</head>
</html>
A continuación debemos añadir el bloque donde se encontrará nuestro carrusel:
<html>
<head>
<script type="text/javascript" language="javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript" language="javascript" src="jquery.carouFredSel-6.2.1-packed.js"></script>
</head>
<body>
<div id="carrusel">
<img src="img01.jpg" alt="building1" width="990" height="450" />
<img src="img02.jpg" alt="building2" width="990" height="450" />
<img src="img03.jpg" alt="building3" width="990" height="450" />
<img src="img04.jpg" alt="building4" width="990" height="450" />
<img src="img05.jpg" alt="building5" width="990" height="450" />
<img src="img6.jpg" alt="building6" width="990" height="450" />
</div>
</body>
</html>
<head>
<script type="text/javascript" language="javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript" language="javascript" src="jquery.carouFredSel-6.2.1-packed.js"></script>
</head>
<body>
<div id="carrusel">
<img src="img01.jpg" alt="building1" width="990" height="450" />
<img src="img02.jpg" alt="building2" width="990" height="450" />
<img src="img03.jpg" alt="building3" width="990" height="450" />
<img src="img04.jpg" alt="building4" width="990" height="450" />
<img src="img05.jpg" alt="building5" width="990" height="450" />
<img src="img6.jpg" alt="building6" width="990" height="450" />
</div>
</body>
</html>
En este caso lo único que hemos hecho ha sido añadir un div al que le debemos asignar un identificador único, en este caso le hemos puesto como identificador carrusel. Y dentro del mismo hemos añadido los elementos que se van a mostrar en el carrusel (en este caso son imágenes pero si examináis el ejemplo que viene con la librería vemos que es posible realizar un carrusel de bloques HTML, lo que resulta bastante interesante).
Finalmente es necesario añadir el código JavasSript necesario para que nuestro carrusel se ejecute:
<html>
<head>
<script type="text/javascript" language="javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript" language="javascript" src="jquery.carouFredSel-6.2.1-packed.js"></script>
<script type="text/javascript" language="javascript">
$(function()
{
$('#carrusel').carouFredSel();
})
</script>
</head>
<body>
<div id="carrusel">
<img src="img01.jpg" alt="building1" width="990" height="450" />
<img src="img02.jpg" alt="building2" width="990" height="450" />
<img src="img03.jpg" alt="building3" width="990" height="450" />
<img src="img04.jpg" alt="building4" width="990" height="450" />
<img src="img05.jpg" alt="building5" width="990" height="450" />
<img src="img6.jpg" alt="building6" width="990" height="450" />
</div>
</body>
</html>
<head>
<script type="text/javascript" language="javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript" language="javascript" src="jquery.carouFredSel-6.2.1-packed.js"></script>
<script type="text/javascript" language="javascript">
$(function()
{
$('#carrusel').carouFredSel();
})
</script>
</head>
<body>
<div id="carrusel">
<img src="img01.jpg" alt="building1" width="990" height="450" />
<img src="img02.jpg" alt="building2" width="990" height="450" />
<img src="img03.jpg" alt="building3" width="990" height="450" />
<img src="img04.jpg" alt="building4" width="990" height="450" />
<img src="img05.jpg" alt="building5" width="990" height="450" />
<img src="img6.jpg" alt="building6" width="990" height="450" />
</div>
</body>
</html>
Como veis se trata de un sencillo JavaScript que usa JQuery (para aquellos que no han usado nunca JQuery es recomendable que se den una vuelta por la web de la librería pues se trata de una de las librerías más usadas por los desarrolladores de páginas web).
Lo único que estamos haciendo aquí es tomar el elemento definido con el nombre carrusel y le decimos a la librería que nos muestre su contenido como un carrusel. Sin embargo esto nos muestra el carrusel más básico posible es posible inicializar la librería con múltiples parámetros. Como ejemplo vamos a mostrar cómo hacer que se muestren tres imágenes a la vez:
<html>
<head>
<script type="text/javascript" language="javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript" language="javascript" src="jquery.carouFredSel-6.2.1-packed.js"></script>
<script type="text/javascript" language="javascript">
$(function()
{
$(function()
{
$('#carrusel').carouFredSel({
width: '100%',
items: {
visible: 3,
start: -1
},
scroll: {
items: 1,
duration: 1000
}
}
);
})
})
</script>
</head>
<body>
<div id="carrusel">
<img src="img01.jpg" alt="building1" width="990" height="450" />
<img src="img02.jpg" alt="building2" width="990" height="450" />
<img src="img03.jpg" alt="building3" width="990" height="450" />
<img src="img04.jpg" alt="building4" width="990" height="450" />
<img src="img05.jpg" alt="building5" width="990" height="450" />
<img src="img6.jpg" alt="building6" width="990" height="450" />
</div>
</body>
</html>
<head>
<script type="text/javascript" language="javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript" language="javascript" src="jquery.carouFredSel-6.2.1-packed.js"></script>
<script type="text/javascript" language="javascript">
$(function()
{
$(function()
{
$('#carrusel').carouFredSel({
width: '100%',
items: {
visible: 3,
start: -1
},
scroll: {
items: 1,
duration: 1000
}
}
);
})
})
</script>
</head>
<body>
<div id="carrusel">
<img src="img01.jpg" alt="building1" width="990" height="450" />
<img src="img02.jpg" alt="building2" width="990" height="450" />
<img src="img03.jpg" alt="building3" width="990" height="450" />
<img src="img04.jpg" alt="building4" width="990" height="450" />
<img src="img05.jpg" alt="building5" width="990" height="450" />
<img src="img6.jpg" alt="building6" width="990" height="450" />
</div>
</body>
</html>
Como puede verse hemos cambiado ligeramente nuestro JavaScript de modo que hemos inicializado diferentes parámetros:
- width. Indicamos que el carrusel usara todo el ancho de la página.
- items. Se trata de un objeto que nos permite definir que elementos se van a mostrar. con visible le indicamos que nos muestre cuantos elementos se muestran al mismo tiempo y start nos indica con que elemento se comienza.
- scroll. Nos permite indicar como se va a realizar el cambio de imágenes. En este caso items nos indica el número de elementos que se van a desplazar con cada movimiento, si no se pone se toma como valor el valor indicado anteriormente en el campo items.visible. Para indicar el tiempo que dura la transición se usa el campo duration donde se indican los milisegundos que se tartará en la misma.
Existen muchas mas opciones que pueden configurarse. Si queréis una lista completa de la misma podéis ir a la siguiente página donde se encuentra la documentación de la librería.
Si queréis ver múltiples ejemplos de que es posible hacer con esta librería, podéis encontrarlos en este enlace. Seguro que aquí encontráis alguna configuración que se ajusta a vuestras necesidades.
Si queréis ver múltiples ejemplos de que es posible hacer con esta librería, podéis encontrarlos en este enlace. Seguro que aquí encontráis alguna configuración que se ajusta a vuestras necesidades.
He añadido un nuevo post en el que indico como crear un carrusel de imágenes en movimiento http://ljlgpro.blogspot.com.es/2014/02/carrusel-de-imagenes-en-movimiento-con.html
ResponderEliminarDOnde esta el ejemplo practico amigazo? gracias
ResponderEliminarEn http://coolcarousels.frebsite.nl/c/1/ tienes multiples ejemplos de la librería.
ResponderEliminarAunque si lo que quieres es un carrusel sencillo te basta con usar las funciones fadeIn y fadeOut de jQuery para ir sustituyendo el contenido de las imágenes de un div cada cierto tiempo. Tienes un ejemplo incluyendo movimiento en la imágenes en: http://ljlgpro.blogspot.com.es/2014/02/carrusel-de-imagenes-en-movimiento-con.html
Hay que pagar por la libreria y es tonto pagar por codigo, mejor buscare otras opciones.
ResponderEliminarMira bien en la página la librería en jquery si la puedes bajar gratuitamente (https://github.com/gilbitron/carouFredSel) el plugin de WordPress es el que es de pago.
EliminarEn cualquier caso si lo que quieres es hacer un carrusel que simpremente te cambie las imágenes cada cierto tiempo es muy facil con jquery sin necesidad de usar librerías.