Flux es un nuevo Slider creado por Joe Lambert para lograr transiciones entre imagenes que se obtiene gracias al uso de animaciones CSS3 y JQuery. Como podeis ver, los efectos al cambiar de imagenes son muy agradables visualmente y cada vez que cambia, efectua uno diferente. Para ponerlo en vuestro blog o web, primero vais a la plantilla y pegais el siguiente codigo antes de </head> y guardais.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/></script>
<script src='http://baliwebdesign.googlecode.com/files/flux.min.js' type='text/javascript'/></script>
<script src='http://baliwebdesign.googlecode.com/files/flux.main.js' type='text/javascript'/></script>
<style>
#slider {
padding:5px;
margin: 0 auto 15px;
}
#slider > .fluxslider {
margin: 0 auto !important;
border: 3px solid #999;
background: #C9C9C9;
padding: 0 0 10px 0;
max-width: 99% !important;
overflow: hidden
}
#slider .pagination {
list-style:none outside none;
padding:5px !important;
}
#slider .pagination li.current {
background-color: dimGray
}
#slider .pagination li {
cursor: pointer;
display: inline-block;
margin-left: 0;
background-color: silver;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
height: 8px;
text-indent: -10000px;
width: 8px;
-moz-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.31);
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.31);
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.31)
}
#transitions {
overflow:hidden;
}
#transitions ul {
float:left;
list-style:none outside none;
padding:0;
width:33%;
}
#transitions ul#trans2D {
text-align:right;
}
#transitions ul li {
margin:0 10px;
}
#warn {
font-weight:bold;
text-align:center;
}
</style>
Ahora, donde querais que se muestre el slider, añadis el siguiente codigo. Sustituid lo que esta en color rojo por las urls de las imagenes que querais que se vean. Para añadir mas imagenes, poned la linea <img src="URL IMAGEN"/> tantas veces como querais.
<div id='slider'><div id='warn'>
<img src="URL IMAGEN"/>
<img src="URL IMAGEN"/>
<img src="URL IMAGEN"/>
<img src="URL IMAGEN"/>
<img src="URL IMAGEN"/>
</div></div>
