rarrav26 Posted August 13, 2013 Report Share Posted August 13, 2013 Hola Les traigo un script que va a darle mucho estilo a su web, espero que sea de su agrado. ¿Qué es lo que hace éste script? El título lo describe, es un slider de imágenes. Imagen de muestra del slider versión Dark Imagen de muestra del slider versión Default (donde se ve blanco en realidad es transparente) - La imagen cambia cada 3 segundos automáticamente. - Si el usuario ubica el cursor sobre la imagen ésta no se cambiará a menos que el usuario haga clic en una de las flechas o quite el cursor. - Los efectos de transición de la imagen están configurados en random aunque pueden ser fijos (son muy buenos los efectos). ¿Cómo instalo el script slider de imágenes? Primero descargamos los archivos adjuntos, descomprimimos, abrimos la carpeta Archivos slider, y esas 3 carpetas y 3 archivos que encontrarán dentro, las arrastran dentro de su web (donde esté su index.php o el archivo que llevará el slider). Sólo falta configurar el index.php o el archivo que tendrá el slider. Abrimos el index.php y pegan éste código en la primer línea del documento (es importante que el código esté fuera de cualquier otro código como <?PHP o <html>) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"> Ahora pegamos éste otro código dentro de la sección <head> o <header> <link rel="stylesheet" href="default/default.css" type="text/css" media="screen" /><link rel="stylesheet" href="dark/dark.css" type="text/css" media="screen" /><link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" /> Y ahora pegamos éste otro código dentro de la sección <body> <div class="slider-wrapper theme-default"><div id="slider" class="nivoSlider"><img src="slider/1.jpg" data-thumb="slider/1.jpg" alt="" title="<center>Titulo 1er imagen</center>" /><img src="slider/2.jpg" data-thumb="slider/2.jpg" alt="" title="<center>Titulo 2da imagen</center>" /><img src="slider/3.jpg" data-thumb="slider/3.jpg" alt="" title="<center>Titulo 3er imagen</center>" /><img src="slider/4.jpg" data-thumb="slider/4.jpg" alt="" title="<center>Titulo 4ta imagen</center>" /></div></div><script type="text/javascript" src="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> Ya cumplidos estos pasos tendrán el slider Default corriendo en el inicio de su web. Si quieren que en vez de correr la versión slider Default, corra la versión slider Dark, cambian la línea <div class="slider-wrapper theme-default"> por <div class="slider-wrapper theme-dark"> Si quieren agregar o quitar imágenes, editar o quitar el título de las mismas, entonces éstas son las líneas que tienen que cambiar <img src="slider/1.jpg" data-thumb="slider/1.jpg" alt="" title="<center>Titulo 1er imagen</center>" /><img src="slider/2.jpg" data-thumb="slider/2.jpg" alt="" title="<center>Titulo 2da imagen</center>" /><img src="slider/3.jpg" data-thumb="slider/3.jpg" alt="" title="<center>Titulo 3er imagen</center>" /><img src="slider/4.jpg" data-thumb="slider/4.jpg" alt="" title="<center>Titulo 4ta imagen</center>" /> Si quieren cambiar el tamaño del slider deben abrir el archivo default.css (si usan la versión Default) o dark.css (si usan la versión Dark), editar .theme-dark.slider-wrapper { background: #222; padding: 10px; width: 550px; /* esta linea */} y ponerle la anchura que más les guste (no se preocupen por la imagen ya que automáticamente se ajusta al slider). IMPORTANTE: si les quedó alguna duda porque no lo expliqué bien, respondan a este post o agreguenme a Skype. Debes iniciar sesión para ver el contenido del enlace en esta publicación. LORDCarlo™ and ahynoa 2 Quote Link to comment Share on other sites More sharing options...
ALavrov On Posted April 5, 2014 Report Share Posted April 5, 2014 Mi cara - ¡Hola a todos ! Aquí se leen en el foro :Debes iniciar sesión para ver el contenido del enlace en esta publicación. ¿Qué piensa usted para encontrarDebes iniciar sesión para ver el contenido del enlace en esta publicación. Aleinis Plata and JavierSirenz 2 Quote Link to comment Share on other sites More sharing options...
.png.baa68f22b2d02704a1a918ed3a8ae985.png.1fea0f4d835688771a54119d1cd217c1.png)
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.