post icon

Crear Slider Gallery con Round Corners con Nivo Slider

Para crear galerías de imagines que van siendo expuestas tenemos infinidades de opciones disponibles a tan sólo una búsqueda en google. En este post no quiero exponer las distintas opciones que se tenemos, sino más bien mostrar un Fork del famoso Nivo Slider que permite redondear las esquinas del mismo.

La modificación la ha creado Abhinay Rathore, y lo colgó en su blog (gracias que Nivo está licenciado como MIT)

Los pasos para usarlos son:

  1. Descargar la librería de Nivo desde la web oficial e instalarla normalmente.
  2. Reemplazar el script “jquery.nivo.slider.js” por uno de estos:
  3. No necesitan cambiar nada en el fichero CSS (al menos para redondear)
  4. En la función de inicialización agregar la nueva opción borderRadius, como sigue en el ejemplo:
$(window).load(<em>function</em>() {
$('<span style="color: #666666;">#slider</span>').nivoSlider({ borderRadius: <span style="color: #c0504d;">20</span> });
});
<div class="slider-wrapper theme-default">
            <div class="ribbon"></div>
            <div id="slider" class="nivoSlider">
                <img src="Images/imagen1.jpg" />
                <img src="Images/imagen2.jpg" />
                <img src="Images/imagen3.jpg" />
            </div>
        </div>

Para ver una previa de como queda, lo pueden hacer desde aquí

Comentarios desde Facebook:

  1. avatar
    Uthanien Mozilla Firefox Windows
    25 septiembre 2011 at 20:45 #

    Hola:

    Estoy tratando de armar una comunidad para desarrolladores del framework Struts hispanoparlantes. De momento no esta la estructura y estoy tratando de llenar de contenido, pero siempre es requerido la ayuda de mas gente ya se que quiera aportar o consultar, y así todos aprender del resto, lo cual es la meta final.

    Si me quieres dar una ayuda “promocionando” el sitio o la tecnología, te lo agradecer.

    El nombre del sitio es http://www.strutshispano.org.

    Saludos!

  2. avatar
    mia MEXICO Internet Explorer Windows
    12 septiembre 2011 at 19:40 #

    [jaja jaja jaja :-Djaja…………..:shock:]

Responder