Carousel con JQuery

• 0
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

Aqui vamos a descubrir como aplicar JQuery para crear un Carousel. Un carousel te permite aprovechar mas del espacio disponible en la pantalla en una forma bastante intuitiva. Vamos a crear un carousel muy simple para aprender los principios. Sera una base para crear tus carouseles mas elaborados. Empecemos...

JQuery

El código JQuery tiene que recordar la posición del ratón encima del contenedor y cambiar la posicion del deslizante detras. Como no sabemos la anchura del contenidos del deslizante este sera el primer trabajo de nuestro script. Lo calculamos así ...

var width = 0;
$("#deslizante > *").each(function(){
var thisWidth = $(this).outerWidth(true);
width = width + thisWidth;
});

Seteamos una variable a 0 . Entonces seleccionamos los hijos directos del deslizante con $("#deslizante > *") y para cada uno con la función each sumamos su anchura a la variable width. Si te fijas bien utilizo $(this).outerWidth(true), el this es el hijo y para pasar el true cojo la anchura incluyendo el margen si hay. Cuando tengamos la anchura de los hijos seteamos la anchura del deslizante a la anchura de sus hijos asi:

$deslizante.css("width", width + "px");

Así con el float left de los hijos estarán en linea horizontal, listos para scroll en relación a la posición del ratón.

Ahora hay que poner el oyente para el ratón encima del contenedor con...

$contenedor.mousemove(function(event){...});

Asi asignamos una función que se activa con el ratón sobre el div contenedor.La función contiene un parámetro event que nos da información sobre la posición del ratón. Vamos a examinar los detalles.
Primero cogemos la posición x del ratón sacando la siguiente información del event objeto, así:

var xpos = event.clientX;

Esto no nos sirve porque nos interesa la posición x sobre el contenedor, lo calculamos así:

var relativexpos = xpos - $contenedor.offset().left;

Sencillamente restamos la distancia del contenedor de la izquierda de la posición x del ratón y conseguimos la posicion x sobre el contenedor. Ahora estamos en una posición para cambiar la posición del deslizante, te pongo el código abajo.

var contenedorWidth = $contenedor.outerWidth(true);
var scrollPos = ((relativexpos / contenedorWidth ) * (width - contenedorWidth )) ;
$contenedor.scrollLeft(scrollPos);

Sacamos la anchura del contenedor, despues calculamos el porcentaje de la izquierda del rat0n encima el contenedor y hacemos un scroll del deslizante al mismo porcentaje . Te he dejado el scroll con la propiedad css overflow: auto; Si lo usas debes cambiarlo a overflow:hidden para que no se vea la barra de scroll. Y ya esta.

JQuery todo

$(document).ready(function(){
$contenedor = $("#carousel-contenedor");
$deslizante = $("#deslizante");

var width = 0;
$("#deslizante > *").each(function(){
var thisWidth = $(this).outerWidth(true);
width = width + thisWidth;
});
$deslizante.css("width", width + "px");
$contenedor.mousemove(function(event){
var xpos = event.clientX;
var relativexpos = xpos - $contenedor.offset().left;
console.log(relativexpos);
var contenedorWidth = $contenedor.outerWidth(true);
var scrollPos = ((relativexpos / contenedorWidth ) * (width - contenedorWidth )) ;
$contenedor.scrollLeft(scrollPos);
});
});



HTML componentes

Necesitamos tres componentes para cumplir el carousel. Primero necesitamos un contenedor que tendrá un tamaño fijo y seria el parte visible o a ventana al contenido detrás. Próximo necesitamos un componente para deslizar el contenido detrás el contenedor en relación al posición del ratón encima del contenedor. Finalmente necesitamos los contenidos que son las cosas que nos interesa mostrar.

HTML contenedor

Para el contenedor necesitamos una elemento de tamaño fijo, para ello deseamos un elemento tipo bloque. En este caso un elemento esta ideal para nosotros. vamos a poner el identificador (id) de "contenedor" porque es el contenedor.

HTML deslizante

El deslizante necesita una ancho fijo también por eso debemos utilizar un elemento bloque. Tenemos en cuenta que el deslizante tendrá una serie de hijos que son los contenidos voy a eligir un y lo pongo el id de deslizante.

HTML contenidos
los contenidos tambien deben ser de tipo bloque para organizar los contenidos a dentro. En essssse cao esta bastante facil elijir el tipo porque el padre esta una <ul> el opción obvio esta una seria o lista de <li>.

HTML todo

<div id="carousel-contenedor">

<ul id="deslizante">

<li>0</li>

<li>1</li>

<li>2</li>

<li>3</li>

<li>4</li>

<li>5</li>

<li>6</li>

<li>7</li>

<li>8</li>

<li>9</li>

<li>10</li>

<li>11</li>

<li>12</li>

<li>13</li>

</ul>

</div>

Ya esta hemos creado una deslizante a donde podemos meter todos los contenidos que queremos sin saltando una linea. Espero que lo has encontrado útil. Por favor deja me un comentario...