Roundabout

Name: Roundabout
Brand: Jose Aguilar
SKU: joseaguilarblog-3504
Availability: InStock
Rating: 5 (1 reviews)

Roundabout es un plugin de jQuery que convierte fácilmente las listas no ordenadas y otras estructuras HTML anidadas en entretenidos e interactivos, contenedores aereos que al hacer click pasan al siguiente.

Al hacer click en el bloque 2 o bloque 5 pasaríamos a ver su contenido. También se podría hacer fácilmente un Roundabout de imágenes.

Para añadir esta funcionalidad a tu Web tan solo tienes que descargar el plugin en su página oficial.

Deberás añadirlo en el <head> de tu página junto con su llamada y la librería jQuery.

<script src="../jquery.js"></script>
<script src="jquery.roundabout.js"></script>
<script>
$(document).ready(function() {
    $('ul#standard').roundabout();
});
</script>

En nuestro <body> tendremos una lista de elementos con id=»standard».

<ul id="standard">
    <li><span>Block 1</span></li>
    <li><span>Block 2</span></li>
    <li><span>Block 3</span></li>
    <li><span>Block 4</span></li>
    <li><span>Block 5</span></li>
</ul>

Ahora solo falta añadir algo de estilo:

ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    width: 42em;
    height: 24em;
}
li {
    height: 20em;
    width: 30em;
    background-color: #ccc;
    text-align: center;
    cursor: pointer;
}
li.roundabout-in-focus {
    cursor: default;
}
li span {
    display: block;
    padding-top: 6em;
}

#carbonads-container .carbonad {
    margin: 0 auto;
}

Ver ejemplo en funcionamiento