el título del slide 1
La pestaña Nº 3
Nullam aliquet, orci at vehicula malesuada, orci augue lacinia nulla, at aliquam turpis elit volutpat velit. Maecenas quis augue in velit interdum imperdiet. Cras odio augue, commodo quis auctor a, tempus eu felis. Morbi interdum elit eget nulla pellentes.
-
el título del slide 2
....... el contenido del primer slide .......
el título del slide 3
....... el contenido del primer slide .......
Este es un
slideshow que utiliza
jQuery para mostrar cualquier clase de contenido en una lista muy simple. Por defecto, el el efecto de
scroll es automático y las velocidades son configurables modificando algunos pocos datos.
Primero, agregamos los
scripts antes de
</head>:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.js' type='text/javascript'/>
Como utiliza un
plugin llamado
jQuery Cycle plugin, debemos descargarlo y alojarlo en algún servidor:
<script src='URL_jquery.cycle.js' type='text/javascript'/>
o bien copiar su contenido y pegarlo en la plantilla:
<script type='text/javascript'>
//<![CDATA[
... aquí pegamos el contenido del archivo jquery.cycle.js ...
//]]>
</script>
El tercer
script es el que controla las funciones y su contenido puede descargarse en
este archivo de texto; lo agregamos usando
CDATA:
<script type='text/javascript'>
//<![CDATA[
... aquí pegamos el contenido del archivo slideshow.js ...
//]]>
</script>
y es ahí donde hay una serie de datos que podemos personalizar; básicamente, la velocidad que se controla con tres variables:
timeout: 1000, // time before next slide appears (in ms)
slideSpeed: 1000, // time it takes to slide in each slide (in ms)
tabSpeed: 300, // time it takes to slide in each slide (in ms) when clicking through tabs
La personalización es puro CSS así que ponemos las reglas elementales:
<stylet>
/* el contenedor principal */
#slideshow {
background-color: #EEE;
width: 600px; /* definimos el ancho total */
}
#slideshow ul {
list-style-type: none;
margin: 0;
padding: 0;
height: 1%; /* IE fix */
}
#slideshow ul:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
/* el contenido de los slides */
#slideshow .slides {
color: #000;
overflow: hidden;
width: 550px;
}
#slideshow .slides ul {
width: 1800px; /* es el ancho multiplicado por la cantidad de slides */
}
#slideshow .slides li {
float: left;
padding: 20px;
width: 560px; /* es el ancho ,enos el padding horizontal */
}
#slideshow .slides h2 { /* los títulos de cada slide */
margin-top: 0;
}
/* la barra navegadora inferior */
#slideshow .slides-nav {
background-color: #101921;
}
#slideshow .slides-nav li {
float: left;
}
#slideshow .slides-nav li a {
color: #FFF;
display: block;
padding: 5px 20px;
outline: none;
}
/* la pestaña activa */
.js #slideshow .slides-nav li.on,.js #slideshow .slides-nav li.on a {
background-color: #EEE;
}
.js #slideshow .slides-nav li.on a {
color: #000;
}
</stylet>
¿Cómo lo utilizamos?
Podemos agregarlo en una entrada, en un elemento HTML o directamente en la plantilla:
<div id="slideshow">
<div class="slides">
<ul>
<li id="slide-one">
<h2> el título del slide 1 </h2>
<p> ....... el contenido del primer slide ....... </p>
</li>
<li id="slide-two">
<h2> el título del slide 2 </h2>
<p> ....... el contenido del primer slide ....... </p>
</li>
<li id="slide-three">
<h2> el título del slide 3 </h2>
<p> ....... el contenido del primer slide ....... </p>
</li>
</ul>
</div>
<ul class="slides-nav">
<li class="on"><a href="#slide-one"> Pestaña 1 </a>
<li><a href="#slide-two"> Pestaña 2 </a></li>
<li><a href="#slide-three"> Pestaña 3 </a></li>
</ul>
</div>
Ficha de autor: Omar Linares Huertas. Omar Linares Huertas conoceme en mi blog: Fundamentes / Twitter: @Omar_Linhu / facebook Estu...
Participa en el contenido publicando un escrito propio o enviando una lectura. Si estas interesado en publicar un escrito en esta revista....jpg "(sin título)")
Mapa Web Escritos Definiciones de Impresionesvivas Relatos Ejercicios autodidactas M...
