domingo, 4 de agosto de 2013

Slider de Imágenes con JavaScript

Slider de Imágenes con JavaScript

Hoy comparto con vosotros un slider de imágenes que funciona con JavaScript, el cual tiene unos efectos de transición muy bonitos e incluye una banda lateral con el texto "Populares". Podéis añadir este gadget a vuestro blog para mostrar a los lectores cuales son vuestros posts más leídos, entre otras cosas, ya que es totalmente personalizable y podéis poner las imágenes que queráis.

Demostración del gadget:

Slider de Imágenes Z Blogger Hecho con JavaScript Aquí puedes poner el texto que quieras http://zblogger.blogspot.com

Cómo instalar este gadget


  1. En el Escritorio Blogger hacemos clic en Diseño.
  2. Hacemos clic en Añadir un Gadget donde queramos poner los anuncios.
  3. En la lista seleccionamos HTML / JavaScript.

    HTML JavaScript

  4. En él pegamos el siguiente código:

<style type="text/css">
    #mcis {
        display: none;
    }
    #sliderFrame {
        position: relative;
        width: 500px;
        margin: 0 auto;
        margin-bottom:35px;
        border:5px solid #000;
    }
    #ribbon {
        width: 111px;
        height: 111px;
        position: absolute;
        top: -4px;
        left: -4px;
        background: url(https://lh3.googleusercontent.com/-lOmnjBSMK0E/Ufo5ZIu8GNI/AAAAAAAABEU/vrIaUC-urzI/s109-no/ribbon.png) no-repeat;
        z-index: 7;
    }
    #slider {
        width: 500px;
        height: 250px;
        background: #fff url(https://lh6.googleusercontent.com/-V7xLkgfh1O8/Ufo_dpsg85I/AAAAAAAABF0/pFT5oNtt_2w/s32-no/loading.gif) no-repeat 50% 50%;
        position: relative;
        margin: 0 auto;
        box-shadow: 0px 1px 5px #999999;
    }
    #slider img {
        position: absolute;
        border: none;
        display: none;
    }
    #slider a.imgLink {
        z-index: 2;
        display: none;
        position: absolute;
        top: 0px;
        left: 0px;
        border: 0;
        padding: 0;
        margin: 0;
        width: 100%;
        height: 100%;
    }
    div.mc-caption-bg, div.mc-caption-bg2 {
        position: absolute;
        width: 100%;
        height: auto;
        padding: 0;
        left: 0px;
        bottom: 0px;
        z-index: 3;
        overflow: hidden;
        font-size: 0;
    }
    div.mc-caption-bg {
        background-color: black;
    }
    div.mc-caption {
        font: bold 14px/20px Arial;
        color: #EEE;
        z-index: 4;
        padding: 10px 0;
        text-align: center;
    }
    div.mc-caption a {
        color: #FB0;
    }
    div.mc-caption a:hover {
        color: #DA0;
    }
    div.navBulletsWrapper {
        top: 265px;
        left: 190px;
        width: 150px;
        background: none;
        padding-left: 20px;
        position: relative;
        z-index: 5;
        cursor: pointer;
    }
    div.navBulletsWrapper div {
        width: 11px;
        height: 11px;
        background: transparent url(https://lh6.googleusercontent.com/-PrCS8GOrP-s/Ufo5rj88CbI/AAAAAAAABEk/mLp19FTjxQI/w11-h22-no/bullet.png) no-repeat 0 0;
        float: left;
        overflow: hidden;
        vertical-align: middle;
        cursor: pointer;
        margin-right: 11px;
        _position: relative;
    }
    div.navBulletsWrapper div.active {
        background-position: 0 -11px;
    }
    #slider {
        transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 0);
    }
</style>


<script src="https://googledrive.com/host/0B-WopI-jeOOsT1NPRC1acHpxWmc/js-image-slider.js" type="text/javascript"></script>
<div id="sliderFrame">
    <div id="ribbon"></div>
    <div id="slider"> 
<a href="#"><img src="https://lh4.googleusercontent.com/-NZBdSjNnq8Y/Ufo7i20BECI/AAAAAAAABFE/WmPQj-wHtvM/w500-h250-no/1.jpg" alt="Slider de Imágenes"/></a>  
<a href="#"><img src="https://lh6.googleusercontent.com/-k-23xqeuGoA/Ufo7i5DJZII/AAAAAAAABFA/flwryNHakH0/w500-h250-no/2.jpg" alt="Z Blogger"/></a>  
<a href="#"><img src="https://lh3.googleusercontent.com/--wowk_eCjQ0/Ufo7jGqnu2I/AAAAAAAABFQ/bWFnl2dQrwQ/w500-h250-no/3.jpg" alt="Hecho con JavaScript"/></a>  
<a href="#"><img src="https://lh5.googleusercontent.com/-83H2OEWPumU/Ufo7jyUMyqI/AAAAAAAABFU/PMBkHwj6JDk/w500-h250-no/4.jpg" alt="Aquí puedes poner el texto que quieras"/></a>  
<a href="http://zblogger.blogspot.com"><img src="https://lh4.googleusercontent.com/-ROPTHF1Uh_s/Ufo7kXzlNgI/AAAAAAAABFc/bDoWeJTe8Ys/w500-h250-no/5.jpg" alt="http://zblogger.blogspot.com"/></a> 
    </div>
</div>

En dicho código tenemos que modificar:

      URL de las imágenes.
      Texto que acompañará a la imagen.
      URL del enlace cuando hacemos clic en la imagen.


NOTA: Las imágenes tienen que ser todas del mismo tamaño. Tamaño recomendado 500px x 250px

19 comentarios :

  1. Interesante
    Nivo Slider Man
    Gracias yo me lo Usare este

    ResponderEliminar
  2. gracias por el slider, es fantastico, pero podrias decirme si se puede reducir la velocidad de las imagenes... ya sabes que vayan un poco mas lento, para que se puedan ver mejor ;)

    ResponderEliminar
  3. Hola. Lo agregue a mi blog y quedo genial. Ahora quisiera poder cambiarle el tamaño al nivoslider, ponerlo mas grande y ademas que se vea solo en la portada del blog y no en todas las paginas. Alguien que pueda ayudarme? Gracias..

    ResponderEliminar
    Respuestas
    1. Para cambiar el tamaño tienes que modificar algunos campos de la parte style del código. Fijate en sliderFrame, slider y navBulletsWrapper.

      Eliminar
  4. Hola, deseo usar este slider, ¿puedo quitar la cinta que dice populares?

    ResponderEliminar
    Respuestas
    1. Para ello elimina la parte del código donde dice #ribbon del código CSS.
      En la parte del script elimina la línea donde pone id=ribbon

      Eliminar
  5. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  6. Gracias Javi, es fenomenal, he buscado mucho en internet, y no habia encontrado nada parecido. He analizado el codigo y lo de la velocidad parase no poder moficarse, si sabes como, te agradecería lo comentaras. Aún así es un gran aporte. Saludos.

    ResponderEliminar
  7. Genial!!!, me he pasado dos días intentando poner un Slider con fotos y no había forma. Cuando ya iba a claudicar, he encontrado tu entrada. Me he puesto a probar, a ir modificando y tengo mi Slider como yo quería. Muchísimas Gracias!!!.

    Te sigo por facebook =^D.

    ResponderEliminar
  8. Me funciono pero me queda mal, necesito que sea de 200 x 200 y aunque movi algunos numeros no me quedo bien, sabes como arreglarlo??

    ResponderEliminar
  9. muy buen slide!!! ¿como hago para que la foto se acomode al tamaño del slide ?

    ResponderEliminar
  10. como le puedo sacar los puntos que salen hay abajo???

    ResponderEliminar
    Respuestas
    1. sacale todos las partes al codigo que empiezan con "div.navBulletsWrapper"

      Eliminar
  11. ¡Excelente, muchas gracias! ¿Se podrá editar la cantidad de tiempo que se mantiene una imagen?

    ResponderEliminar
  12. saludos. como puedo hacer para que las imagen se adapten a tama;o del slider

    ResponderEliminar
  13. ok ya resolvi todo muchas Gracias llevo semanas buscando esto.

    ResponderEliminar
  14. saludos si alguien puede responder por favor . hace un momento se estaba viendo las imágenes pero de un momento para otro dejaron de verse y ahora solo se mantiene cargando. y no pasa de ahi

    ResponderEliminar
  15. Hola Javi que le pasa al slider??? solo se mantiene cargando y no pasa de ahí. por favor te agradecería una posible solución. Muchas gracias por tu post

    ResponderEliminar