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 ms sencillos slideshow de imgenes. Un usuario, por Facebook, me pregunto sobre como aadir botones de navegacin a ese slideshow y por eso les traigo este tutorial. A ese otro slider que yo mismo cree era dificil aadirle los botones por su sencillez, asique me puse a buscar en la web por si ya haba uno sencillo y con botones de navegacin y encontr uno enInnominepixel. Aqu os traigo la explicacin, dems de algun otro detalle. Vista previa
1 Insertar cdigos en el HEAD

Lo primero que vamos a hacer es insertar los siguientes cdigos en el HEAD de nuestra web. Hay 3 cdigos, uno de ellos es el CSS, con el que le damos estilo al contenedor, a las flechas de navegacin, etc. Otro es el JS encargado de las funciones del slider y de los botones de navegacin y el ltimo es el de la librera 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 cdigo y pegarlo en el HEAD de tu web entre las etiquetas <style> y </style> Cdigo 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/easyslider.js"></script>

<link rel="stylesheet" type="text/css" href="http://jdwebfiles.webcindario.com/Easy%20slider/easy-slidercss.css">

2 Insertar cdigos 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 ms que varios DIVS con varias imgenes dentro. Para ello insertamos el siguiente cdigo en el lugar donde queremos que aparezca el slider. Cdigo 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 navegacin, tampoco es tan difcil verdad? Recordar que podis editar el estilo copiando el cdigo del archivo .CSS e insertndolo en la web, como arriba expliqu. Ah mismo podis cambiar la imagen de los botones as como la lnea horizontal superior.
3 Personalizacin

Supongo que no dejaris las imgenes que os aparecern con el slider no? y que pondris las vuestras propias, pues quiero explicaros una cosa. Para cambiar las imgenes tendris que editar unos parametros del CSS: .sliderContainer{ width: 1030px; Ancho del slider completo height: 400px; Alto del slider completo position: relative; margin:auto; }

#slider { width: 900px; Ancho de la imagen height: 380px; Alto de la imagen background: #FFF; border: 5px solid #FFF; overflow: hidden; position: relative; margin: auto; } #slider .slide{ width: 900px; Ancho de la imagen height: 380px; Alto de la imagen float: left; }

Y ahora otra zona del archivo widget/html: <div class="slidesContainer" style="width: 2700px;"> Si cambiais las imgenes, ah colocareis el resultado de multiplicar el numero de imgenes que tengis por lo que mide cada una, en mi caso tengo 3 imgenes x 900 que mide cada una: 3*900=2700

Espero que lo entendis todo y que os guste.

Leer ms: http://jdwebdesign.jimdo.com/2013/05/24/aprende-a-crear-un-sencillo-slider2/#ixzz2YbX3Gzd0