Flexslider responsive
En este post espero poder enseñaros de la forma lo más fácil posible como insertar flexslider responsive (un pase de diapositivas Flexslider con diseño responsive) en una de vuestras páginas html.
En este caso el Flexslider que descargaremos en el paso 3 será Responsive.

PASO1: Copiar en el HEAD:

<link rel=”stylesheet” href=”flexslider.css” type=”text/css”>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js”></script>
<script src=”jquery.flexslider.js”></script>

<script type=”text/javascript” charset=”utf-8″>
$(window).load(function() {
$(‘.flexslider’).flexslider();
});
</script

PASO2: Copiamos en el lugar donde deseamos tener el slide (ejemplo de pase de diapositivas de 3 imágenes):

<div class=”flexslider”>
<ul class=”slides”>
<li>
<img src=”slide1.jpg” />
</li>
<li>
<img src=”slide2.jpg” />
</li>
<li>
<img src=”slide3.jpg” />
</li>
</ul>
</div>

PASO 3: Copiemos los archivos que vienen en el winrar que podemos descargar de la página http://www.woothemes.com/flexslider en sus carpetas y directorios correspondientes.
NOTA: esta dirección es una de las muchas en las que podéis encontrar diferentes tipos de flexsliders.
PASO 4 (OPCIONAL): Configurar el slider:
El jquery siempre viene con unos parámetros determinados, pero nosotros podemos variarlos de la siguiente forma.
Ejemplo 1: Que se no se inicie el slider al entrar en la página donde está instalado:
Dentro del código del paso1:

<script type=”text/javascript” charset=”utf-8″>
$(window).load(function() {
$(‘.flexslider’).flexslider({
slideshow:false})
});
</script>

Ejemplo 2: supongamos que deseamos que el slider comience al entrar en la página donde está situado el slide y queremos que una imagen permanezca solo 2 segundos (dentro del código del paso1):

<script type=”text/javascript” charset=”utf-8″>
$(window).load(function() {
$(‘.flexslider’).flexslider({
        slideshow:true,
slideshowSpeed: 2000
})
});
</script>

Y así, añadiendo o modificando las diferentes propiedades que puede tener un Flexslider podemos poner a nuestro gusto el pase de diapositivas.
NOTA: las propiedades del flexslider vienen junto a los ficheros que os podísteis descargar en el paso 3.
Espero mi explicación os haya ayudado a insertar un flexslider en vuestra web.
En Virtual Web Estudio a tu disposición para realizar el diseño web en Valencia, o consulta para otra localidad de España.