Como hacer un slideshow para un sitio web

Aprende como crear un Slideshow para tu sitio web utilizando HTML, CSS y Javascript.

https://www.javimata.com/blog/slider-tipo-libro-con-html5-y-jquery-usando-turn-js estilo
libro
http://www.falconmasters.com/tutoriales/como-hacer-slideshow/

FalconMasters Carlos Arturo

23 julio, 2014
 Diseño Web
 Elementos web
 Jquery
 Tutoriales

Uno de los elementos mas utilizados en sitios web de productos son los
Sliders, mejor conocidos como Slideshows, que como quizás ya sabrás son
contenedores de imágenes que cambian de 1 en 1 cada cierto tiempo.

Hoy vamos aprender como hacer un slideshow e implementarlo en nuestros

sitios web, esto lo haremos con HTML, CSS y un poco de Javascript.

Demo del Slideshow: http://falconmasters.com/demos/slideshow/

Como hacer un slideshow para un sitio web con HTML, CSS y JS

Estructura de nuestro Slideshow:

XHTML

1 <div class="main">
2 <div class="slides">
3 <img src="http://lorempixel.com/1600/900/city/1" alt="">
4 <img src="http://lorempixel.com/1600/900/city/2" alt="">
5 <img src="http://lorempixel.com/1600/900/city/3" alt="">
6 </div>
7 </div>
Código CSS:

1 *{
2 margin:0;
3 padding:0;
4 }
5
6 body {
7 background:#f2f2f2;
8 }
9
10 .main {
11 width:90%;
12 max-width:1000px;
13 margin:20px auto;
14 }
15
16 .slides {
17 width:100%;
18 }
19
20 .slides img {
21 width:100%;
22 }
23
24 .slidesjs-pagination {
25 background:#424242;
26 list-style:none;
27 overflow:hidden;
28 }
29
30 .slidesjs-pagination li {
31 float:left;
32 }
33
34 .slidesjs-pagination li a {
35 display:block;
36 padding:10px 20px;
37 color:#fff;
38 text-decoration:none;
39 }
40
41 .slidesjs-pagination li a:hover {
42 background:#000;
43 }
44
45 .slides .active {
46 background:#000;
47 }
48
49 .slidesjs-navigation{
50 background:#000;
51 color:#fff;
52 text-decoration:none;
53 display:inline-block;
54 padding:13.5px 20px;
55 float:right;
56 }
Código Javascript (Recuerda ponerlo al final de tu documento, antes de
</body>)
JavaScript

1 <script>
2
3 $(function(){
4 $(".slides").slidesjs({
5 play: {
6 active: true,
7 // [boolean] Generate the play and stop buttons.
8 // You cannot use your own buttons. Sorry.
9 effect: "slide",
10 // [string] Can be either "slide" or "fade".
11 interval: 3000,
12 // [number] Time spent on each slide in milliseconds.
13 auto: true,
14 // [boolean] Start playing the slideshow on load.
15 swap: true,
16 // [boolean] show/hide stop and play buttons
17 pauseOnHover: false,
18 // [boolean] pause a playing slideshow on hover
19 restartDelay: 2500
20 // [number] restart delay on inactive slideshow
21 }
22 });
23 });
24
25 </script>
Para solucionar el problema de los botones cambiados:

Para poder acomodar los botones correctamente vamos a seguir trabajando en

nuestro archivo jquery.slides.js y vamos a modificar las siguientes lineas de la
siguiente manera:

Linea 118
JavaScript

1 "class": "slidesjs-next slidesjs-navigation",

Linea 124
JavaScript

1 "class": "slidesjs-previous slidesjs-navigation",

Lo unico que hacemos es en realidad cambiarlas una por otra, después de esto
ya nada mas agregamos nuestras clases del icono.
Recursos Utilizados:

SlideJS: http://www.slidesjs.com/
IcoMoon: http://icomoon.io/app/
Jquery: http://code.jquery.com/jquery-1.9.1.min.js
Comprimir el peso de tus imágenes para slideshow