S3Slider es otro carrusel (slide) para ver una serie de fotos con un texto.El texto se adapta a los lados, con una descripción de cada foto o elemento. Aquí ya vimos otro carrusel.
Demo.
Estos son los pasos a seguir:
1. Bajamos los ficheros jquery.js y y s3slider.js y los alojamos en nuestro alojamiento habitual.
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>
<script type="text/javascript">
$(document).ready(function() {
$("#s3slider").s3Slider({
timeOut: 4000
});
});
</script>
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 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.
5. Añadimos el css 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;
}
Fácil.
Visitas
6 comentarios:
no lo doy echo funcionar mi mail es Ass_itch77@hotmail.com ayudame
gracias
issues77:
Si sigues las instrucciones que doy debería funcionar. Si tienes alguna duda en algún paso vuelve a comentarme.
Saludos.
no se lo que hago mal,hago todo lo q me dices,se ve el espacio,pero no salen las imagenes
issues77, puede que tengas algún script instalado ya en tu plantilla que interfiera con s3slider.
He creado un blog de prueba en http://pruebas3slider.blogspot.com/ distinto de la demo del autor para que veas que funciona perfectamente. Si me mandas tu plantilla donde lo has implementado la echaría un vistazo.
Saludos.
Gracias, todo funciona bien a la perfección, gracias por tu aporte, lo estaba buscando y fue muy eficiente. :D Saludos.
Admin, me alegro. Saludos.