Slide de noticias para tu Blog

Estrada Web Group
Administrador
Slide de noticias para tu Blog

Slider news para mi blog

El slider que te presentamos en este post, es el que utilizamos en este blog DeveloperJI. En seguida te explicamos un poco la configuración.

Primero tienes que incluir las hojas de estilo dentro del head de tu página como se muestra a continuación.

<head>
    <title>Nivo Slider Demo</title>
    <link rel="stylesheet" href="themes/default/default.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="themes/light/light.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="themes/dark/dark.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="themes/bar/bar.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>

Enseguida creas el "div" que sera el contenedor principal, las imagenes que se presentaran en el slider y el caption la información que aparecera al pie de la imagen. Las imágenes se ligan con el caption con  title="#htmlcaption" que es el ID de div que contiene la descripción.

<div id="wrapper" style="margin-top:180px;">
        <div class="slider-wrapper theme-default">
            <div id="slider" class="nivoSlider">

                <img src="images/toystory.jpg" data-thumb="images/toystory.jpg" alt="" title="#htmlcaption"/>
                <img src="images/up.jpg" data-thumb="images/up.jpg" alt="" title="#htmlcaption2"/>
                <img src="images/walle.jpg" data-thumb="images/walle.jpg" alt="" data-transition="slideInLeft" title="#htmlcaption3"/>
                <img src="images/nemo.jpg" data-thumb="images/nemo.jpg" alt="" title="#htmlcaption" title="#htmlcaption4"/>
            </div>
            <div id="htmlcaption" class="nivo-html-caption">
                <div class="slaidCat">
                    Como crear tu blog
                </div>
                <div class="slaidDate">
                    23 Mayo 2013
                </div>
                <div class="slideDescipcion">
                <a href="http://www.DeveloperJI.com"><strong>This</strong> is an example of a <em>HTML</em> caption with a link</a>. </div>
            </div>

            <div id="htmlcaption2" class="nivo-html-caption">
                <div class="slaidCat">
                    ASP.NET
                </div>
                <div class="slaidDate">
                    23 Mayo 2013
                </div>
                <div class="slideDescipcion">
                <a href="http://www.DeveloperJI.com"><strong>This</strong> is an example of a <em>HTML</em> caption with a link</a>. </div>
            </div>

            <div id="htmlcaption3" class="nivo-html-caption">
                <div class="slaidCat">
                    Developer
                </div>
                <div class="slaidDate">
                    23 Mayo 2013
                </div>
                <div class="slideDescipcion">
                <a href="http://www.DeveloperJI.com"><strong>This</strong> is an example of a <em>HTML</em> caption with a link</a>. </div>
            </div>
            <div id="htmlcaption4" class="nivo-html-caption">
                <div class="slaidCat">
                    Jquery
                </div>
                <div class="slaidDate">
                    23 Mayo 2013
                </div>
                <div class="slideDescipcion">
                <a href="http://www.DeveloperJI.com"><strong>This</strong> is an example of a <em>HTML</em> caption with a link</a>. </div>
            </div>
        </div>

    </div>

 El slide te permite poner diferentes efectos a las imágenes, esto lo puedes configurara con la propiedad data-transition de las imagenes, las opciones que tienes son:

  • sliceDown
  • sliceDownLeft
  • sliceUp
  • sliceUpLeft
  • sliceUpDown
  • sliceUpDownLeft
  • fold
  • fade
  • random
  • slideInRight
  • slideInLeft
  • boxRandom
  • boxRain
  • boxRainReverse
  • boxRainGrow
  • boxRainGrowReverse

Por ultimo solo tienes que agregar el Javascript que crea el slider y los include.

 <script type="text/javascript" src="scripts/jquery-1.9.0.min.js"></script>
    <script type="text/javascript" src="jquery.nivo.slider.js"></script>
    <script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
    });
    </script>

Para descardar el ejemplo da click aquí.

Si tienes algun problema al implementar este Javascript o quieres agradecernos puedes ecribirme a info@developerji.com o por las redes sociales.

Compartir artículo:

Más artículos geniales

Declaración de variables en JavaScript con let

Declaración de variables en JavaScript con let

Resumen: en este tutorial, aprenderás a usar la palabra clave let de JavaScript para declarar variables de ámbito de bloque.

Ver artículo completo
Cúal es el alcance o el ámbito de las variables en JavaScript

Cúal es el alcance o el ámbito de las variables en JavaScript

Resumen: en este tutorial, aprenderás sobre el alcance o el ámbito de las variables en JavaScript que determina la visibilidad y accesibilidad de las variables.

Ver artículo completo
¿Cómo obtener la latitud y longitud en google maps a partir de una dirección?

¿Cómo obtener la latitud y longitud en google maps a partir de una dirección?

Si desea encontrar obtener la latitud y longitud de Google Maps con jquery y javascript. Entonces tienes el lugar correcto. obtener la latitud y la longitud de la dirección utilizando las API de Google Map con jquery y javascript

Ver artículo completo

Manténgase actualizado

Obtenga excelente contenido en su bandeja de entrada todas las semanas.
Solo contenido excelente, no compartimos su correo electrónico con terceros.
Subir al inicio de la pantalla