Hoy os queremos enseñar como poner una slider con efecto de acordeon muy sencillo y fácil que podemos encontrar en la web http://www.armagost.com/zaccordion/, este acordeon nos permite crear un slider con el efecto de forma rápida y sencilla, lo primero que tenemso que hacer es descargarnos los archivos de su web o del siguiente enlace: zaccordion.zip

Una vez descargado y descomprimido necesitaremos en nuestra web crearnos un div donde meteremos el acordeon de la siguiente forma.

<div class="acordeon">
        	<ul id="fotos">
            	<li><img src="imagenes/taller1.jpg" width="700" height="300" alt=""/></li>
                <li><img src="imagenes/taller2.jpg" width="700" height="300" alt=""/></li>
                <li><img src="imagenes/taller3.jpg" width="700" height="300" alt=""/></li>
                <li><img src="imagenes/taller4.jpg" width="700" height="300" alt=""/></li>
            </ul>
        </div>

 Y añadiremos un estilo a la clase acordeon para que ocupe toda la web y quede centrado, exactamente 1170 px y sea 300px de alto en el header de nuestra web o en el archivo .css que estemos usando con el siguiente código.

  .acordeon{
	width:1170px;
	height:300px;
	margin:auto;
	}

Luego por ultimo tendremos que inicializar el acordeon al final de nuestra web justo por encima del /body, sin olvidarnos de introducir el jquery que también es necesario para que funcione.

   <script src="js/jquery-1.11.3.min.js"></script> 
  <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
  <script src="js/jquery.zaccordion.js" type="text/javascript"></script>
  <script type="text/javascript">
  	$(document).ready(function() {
		$("#fotos").zAccordion({ 
			easing: 'easeOutBounce',			
			timeout: 2500,
			slideWidth: 700,
			width: 1170,
			height: 300,
			pause: false,
		});
	});
  </script>

En este caso hemos dado el ancho de la foto a 700 que es el tamaño de nuestras imagenes, teniendo estos tamaños si queremos que nuestro acordeon sea responsive tendremos que adaptarlo y usar porcentajes para que asi se adapte a cualquier dispositivo, modificando el código y dejandolo como sigue conseguimos que se adapte a cualquier dispositivo.

  	$(document).ready(function() {
		$("#fotos").zAccordion({ 
			easing: 'easeOutBounce',			
			timeout: 2500,
			slideWidth: "58%",
			width: "100%",
			height: "100%",
			pause: false,
		});
		$("#fotos img").width("100%");
		$("#fotos img").height("100%");
		
	});

No fijamos que hemos añadido dos lineas al final que hacen que nuestras imagenes se adapten al tamaño del div acordeon que deberemos modificar y añadir las correspondiente medias querys siguiente para que funcione bien en cualquier dispositivo.

@media screen and (min-width:768px){
	.acordeon{
		height:192px;
	}
}
@media screen and (min-width:992px){
	.acordeon{
		height:248px;
	}
}
@media screen and (min-width:1200px){
	.acordeon{
		width:1170px;
		height:300px;
		margin:auto;
	}
}

Con esto tendríamos nuestro acordeon funcionando en todos los dispositivos, podemos ver un ejempl o continuación.