En Julio a petición de un lector les deje un codigo para crear un efecto Carrousel en sus paginas web o blogs. Sin embargo algunos comentarios que llegaron a mi mail me contaban que se les complicaba mucho.Revisando en la web encontre en jesgo23 una nueva forma de crear un carrusel en tu pagina web o en tu blog. Esta disponible para Blogger.. asi que pilas.
1. Descarga los archivos Bajamos los ficheros jquery.js y y s3slider.js y los alojamos en nuestro alojamiento habitual. Bajalos Aqui.
2. Antes de </head> ponemos:
<script src="TU_URL/jquery.js" type="text/javascript"></script> <script src="TU_URL/s3Slider.js" type="text/javascript"></script>
3.Después de <body> ponemos:
<script type="text/javascript"> $(document).ready(function() { $("#s3slider").s3Slider({ timeOut: 4000 }); }); </script>
En timeOut: 4000 modificamos el tiempo en milisegundos que tardarán en deslizarse las imágenes.
4. Ponemos lo siguiente donde queramos poner el Carrusel:
<div id="s3slider"> <ul id="s3sliderContent"> <li class="s3sliderImage"> <img src="TU_URL_IMAGEN1" /> <span>TEXTO DE LA IMAGEN1</span> </li> <li class="s3sliderImage"> <img src="TU_URL_IMAGEN2" /> <span>TEXTO DE LA IMAGEN2</span> </li> <div class="clear s3sliderImage"></div> </ul> </div>En TU_URL_IMAGENX ponemos la dirección url de nuestras fotos.
En TEXTO DE LA IMAGENX ponemos el texto que describe cada foto.
Añadimos los bloques :
<li class=”s3sliderImage”>
<img src=”TU_URL_IMAGEN” />
<span>TEXTO DE LA IMAGEN</span>
</li>
que necesitemos
Y para terminar y darle su respectiva forma CSS, nos ubicamos antes de
]]> :
#s3slider {
width: 400px; /* mismo ancho que las imágenes */
height: 300px; /* misma altura que las imágenes */
position: relative; /* importante */
overflow: hidden; /* importante */
}#s3sliderContent {
width: 400px; /* mismo ancho que las imágenes */
position: absolute; /* importante */
top: 0; /* importante */
margin-left: 0; /* importante */
}
.s3sliderImage {
float: left; /* importante */
position: relative; /* importante */
display: none; /* importante */
}
.s3sliderImage span {
position: absolute; /* importante */
left: 0;
font: 10px/15px Arial, Helvetica, sans-serif;
padding: 10px 13px;
width: 374px;
background-color: #000;
filter: alpha(opacity=70); /* opacidad caja del texto */
-moz-opacity: 0.7; /* opacidad caja del texto */
-khtml-opacity: 0.7; /* opacidad caja del texto */
opacity: 0.7; /* opacidad caja del texto */
color: #fff;
display: none; /* importante */
top: 0;
/*
si ponemos top: 0;
la caja de texto estará en la parte superior
si ponemos bottom: 0;
la caja de texto estará en la parte inferior
*/
}
.clear2 {
clear: both;
}
