Aprende a crear un sencillo slider (2)tutorial · jimdo | Posted by: Jdwebdesign on Blog

http://jdwebdesign.jimdo.com/2013/05/24/aprende-a-crear-un-sencillo-slider-2/

Hace poco publiqué un tutorial sobre como crear con un poco de HTML, CSS y jQuery uno de los más sencillos slideshow de imágenes. Un usuario, por Facebook, me pregunto sobre como añadir botones de navegación a ese slideshow y por eso les traigo este tutorial. A ese otro slider que yo mismo cree era dificil añadirle los botones por su sencillez, asique me puse a buscar en la web por si ya había uno sencillo y con botones de navegación y encontré uno enInnominepixel. Aquí os traigo la explicación, demás de algun otro detalle. 

Vista previa1º Insertar códigos en el HEAD

Lo primero que vamos a hacer es insertar los siguientes códigos en el HEAD de nuestra web. Hay 3 códigos, uno de ellos es el CSS, con el que le damos estilo al contenedor, a las flechas de navegación, etc. Otro es el JS encargado de las funciones del slider y de los botones de navegación y el último es el de la librería de jQuery, para que todo lo anterior funcione. !Importante: Si quieres editar el CSS a tu gusto solo tienes que entrar en el enlace, copiar todo el código y pegarlo en el HEAD de tu web entre las etiquetas <style> y </style>

Código para el HEAD<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js' type='text/javascript'> </script> <script src="http://jdwebfiles.webcindario.com/Easy%20slider/easy-slider.js"></script>

<link rel="stylesheet" type="text/css" href="http://jdwebfiles.webcindario.com/Easy%20slider/easy-slider-css.css">2º Insertar códigos del slider

Genial, ya tenemos el estilo y el jquery para que todo funcione, pero claro, ahora tenemos que crear el slider propiamente dicho, que no será más que varios DIVS con varias imágenes dentro. Para ello insertamos el siguiente código en el lugar donde queremos que aparezca el slider. Código Widget/Html<div class="sliderContainer">

<a href="#siguiente" class="next" title="Siguiente"></a> <a href="#anterior" class="prev" title="Anterior"></a>

<div id="slider">

<div class="slidesContainer" style="width: 2700px;"> <div class="slide"><img src="http://jdwebfiles.webcindario.com/Easy%20slider/images/image1.png" alt="Imagen 01"></div> <div class="slide"><img src="http://jdwebfiles.webcindario.com/Easy%20slider/images/image2.png" alt="Imagen 02"></div> <div class="slide"><img src="http://jdwebfiles.webcindario.com/Easy%20slider/images/image3.png" alt="Imagen 01"></div> </div> <!-- /slidesContainer -->

</div> <!-- /slider -->

</div>Terminado, ya está listo nuestro slider con navegación, tampoco es tan difícil ¿verdad?Recordar que podéis editar el estilo copiando el código del archivo .CSS e insertándolo en la web, como arriba expliqué. Ahí mismo podéis cambiar la imagen de los botones así como la línea horizontal superior.3º Personalización

Supongo que no dejaréis las imágenes que os aparecerán con el slider ¿no? y que pondréis las vuestras propias, pues quiero explicaros una cosa. Para cambiar las imágenes tendréis que editar unos parametros del CSS: .sliderContainer{width: 1030px; Ancho del slider completoheight: 400px; Alto del slider completoposition: relative;margin:auto;}

 #slider {width: 900px; Ancho de la imagenheight: 380px;  Alto de la imagenbackground: #FFF;border: 5px solid #FFF;overflow: hidden;position: relative;margin: auto;} #slider .slide{width: 900px; Ancho de la imagenheight: 380px; Alto de la imagenfloat: left;}  Y ahora otra zona del archivo widget/html: <div class="slidesContainer" style="width: 2700px;"> Si cambiais las imágenes, ahí colocareis el resultado de multiplicar el numero de imágenes que tengáis por lo que mide cada una, en mi caso tengo 3 imágenes x 900 que mide cada una: 3*900=2700  Espero que lo entendáis todo y que os guste. 

Leer más: http://jdwebdesign.jimdo.com/2013/05/24/aprende-a-crear-un-sencillo-slider-2/#ixzz2YbX3Gzd0