banner
hace 5 años
1068 Views

Slider jQuery

Autor:
banner

 
Tutorial donde crearemos un Slider jQuery, enlazando la librería de JavaScript jQuery mediante Scripts para no tener la librería en el servidor web.
 
El Slider jQuery contara con 6 imágenes y no llevara controles de Slider, los cambios se realizaran con un temporizador que generara el cambio de imagen.
 

Por otro lado hay que mencionar, que el efecto que conseguimos en esta practica se realiza mediante Javascript, mejor dicho con jQuery. Para poder utilizar la librería jQuery de Javascript, necesitaremos añadir unos Script en el <head> del código Html.

 

Este Script nos permite usar la libreria jQuery de Javascript, sin necesidad de tener jQuery en nuestro servidor

 

Para enlazar estas librerías utilizaremos estas tres lineas de código, que habrá que meterlas en el <head> del código Html.
 


<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js">
</script>
<script type="text/javascript"src="https://googledrive.com/host/0BzTF4maHDSaGZU0yMXRrRTYxdWM/jquery.cycle.all.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade' // elige el tipo de transicion, ej: fade, scrollUp, shuffle, etc...
});
});
</script>

 

Vamos al Código Html

 

En el Html, solo declararemos un Contenedor y las 6 Imágenes.

Definimos un Contenedor class=”slideshow”, y dentro de él; añadiremos las imágenes con sus dimensiones.
 



<div class="slideshow">
<img src="1.jpg" width="700" height="400" />
<img src="2.jpg" width="700" height="400" />
<img src="3.jpg" width="700" height="400" />
<img src="4.jpg" width="700" height="400" />
<img src="5.jpg" width="700" height="400" />
<img src="6.jpg" width="700" height="400" />
</div>


 

Vamos al Código Css

 
En el Css realizamos el diseño de los elementos de la web; en este caso son solo dos: el Contenedor y las Imágenes.
 

</em></span>

.slideshow {
position:relative;
top:100px;
left:-8%;
height: 432px;
width: 432px;
margin: auto; }

.slideshow img {
padding: 15px;
-webkit-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;

background: rgb(238,238,238); /* Old browsers */
background: -moz-linear-gradient(top, rgba(238,238,238,1) 0%, rgba(204,204,204,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color- stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(204,204,204,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Op era 11.10+ */
background: -ms-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* I E10+ */
background: linear-gradient(to bottom, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cc cccc',GradientType=0 ); /* IE6-9 */
}<span style="color: #339966;"><em>

 

En el archivo Css declaramos varias cosas:

  • La Posición del Contenedor
  • Paddings, fondo y bordes de las Imágenes
  • Códigos de Compatibilidad con los Navegadores

 

En este momento ya tendríamos creado el Slider jQuery, en unos pocos paso hemos realizado un Slider sencillo con acabado profesional

 

Como siempre antes de despedirme, comentaros que cualquier problema no dudéis en comentármelo

Sendoa

Sendoa

¡Aúpa! Me llamo Sendoa y soy un apasionado del Diseño y Desarrollo Web.

Fundador de WebSdcStudio.es; mi blog personal, donde expongo diferentes contenidos de ayuda, consejos, trucos, recursos... sobre el mundo del Diseño y Desarrollo Web.
Sendoa

Latest posts by Sendoa (see all)

Articulos Relacionados

Tags Artículos:
Artículos Categorías:
Desarrollo Web · jQuery · Recursos Web
banner

Deja un Comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Left Menu Icon
Web Sdc Studio
Right Menu Icon