Jump to content

Script slider de imágenes

rarrav26

By rarrav26
in Scripts for your web

 Share

Recommended Posts

rarrav26 Newbie

rarrav26

Posted
Posted

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 enviada

 

 

 

 

Imagen de muestra del slider versión Default (donde se ve blanco en realidad es transparente)

 

Imagen enviada

 

 

 

- 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.

Archivos slider.rar

  • 7 months later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...

Important Information

This site uses cookies to enhance your browsing experience and provide relevant content. By continuing to browse, you agree to our We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. and Terms of Use. For more information on how we protect your data, please check our Privacy Policy.