Cómo crear un Slider con jQuery y CSS3

Cómo crear un Slider con  jQuery y CSS3

Español | 1.3 Mb | Online | Publicación:2013 | Pass:www.detodoprogramacion.com

Descripción:
Hoy vamos a codificar un slider sensible de la interfaz de usuario impresionista. Vamos a codificar utilizando el plugin FlexSlider para la funcionalidad y el estilo usando CSS3. Espero que lo disfruten y les resulta útil para sus proyectos.

Empezamos!

PASO 1 - marcado
El deslizador marcado HTML es muy simple. Crearemos un <div> con la clase "flex-container", luego dentro de este <div> vamos a añadir otro con la clase "flex-slider", en este div se coloca todos los controles deslizantes. Para terminar vamos a crear una lista desordenada de añadir todas las diapositivas. Cada diapositiva debe estar dentro de un elemento de la lista.
<div class="flex-container"> <div class="flexslider"> <ul class="slides"> <li> <a href="#"><img src="img/slide1.jpg" /></a> </li> <li> <img src="img/slide2.jpg" /> </li> <li> <img src="img/slide3.jpg" /> <p> visita - www.detodoprogramacion.com</p> </li> </ul> </div> </div>

A continuación vamos a incluir la librería jQuery y el plugin FlexSlider. Para cargar el control deslizante incluye el siguiente código, se puede establecer la configuración de allí también, para más ajuste, visite el sitio web de plugin.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> <script src="js/jquery.flexslider-min.js"></script> <script> $(document).ready(function () { $('.flexslider').flexslider({ animation: 'fade', controlsContainer: '.flexslider' }); }); </script>

PASO 2 - Estilos Básicos
En primer lugar vamos a añadir algunos estilos de restablecimiento para borrar todos los márgenes, rellenos, etc y mantener la coherencia a través de todos los navegadores.
.flex-container a:active, .flexslider a:active, .flex-container a:focus, .flexslider a:focus { outline: none; } .slides, .flex-control-nav, .flex-direction-nav { margin: 0; padding: 0; list-style: none; } .flexslider a img { outline: none; border: none; } .flexslider { margin: 0; padding: 0; }

A continuación vamos a ocultar las diapositivas para evitar saltos de las imágenes durante la carga de la página. También vamos a definir algunos estilos para las imágenes.
.flexslider .slides > li { display: none; -webkit-backface-visibility: hidden; } .flexslider .slides img { width: 100%; display: block; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;

Para finalizar este paso vamos a añadir algunos estilos para limpiar los floats from de las diapositivas.
.slides:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } html[xmlns] .slides { display: block; } * html .slides { height: 1%; }

PASO 3 - Estilos de contenedores
Para el recipiente pondremos el color de fondo a blanco y agregar una pequeña sombra mediante la propiedad CSS3 "box-shadow". A continuación, vamos a agregar relleno 10px y las esquinas redondeadas.
.flexslider { position: relative; zoom: 1; padding: 10px; background: #ffffff; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0px 1px 1px rgba(0,0,0, .2); -moz-box-shadow: 0px 1px 1px rgba(0,0,0, .2); box-shadow: 0px 1px 1px rgba(0,0,0, .2); }

He puesto un ancho mínimo y máximo para el regulador. Es posible que tenga que cambiar o eliminar en la aplicación de su proyecto. Vamos a establecer la propiedad zoom a 1, esto evitará el cambio de tamaño en los navegadores móviles.
.flex-container { min-width: 150px; max-width: 960px; } .flexslider .slides { zoom: 1; }

PASO 4 - Las flechas Siguiente y Anterior
Para los botones Siguiente y Anterior vamos a añadir un gradiente CSS3 verde, establecer la anchura y la altura, etc Para alinear los botones verticalmente, tenemos que colocarlas 50% de la parte superior y añadir un margen negativo, la mitad de la anchura del botón.
.flex-direction-nav a { display: block; position: absolute; margin: -17px 0 0 0; width: 35px; height: 35px; top: 50%; cursor: pointer; text-indent: -9999px; background-color: #82d344; background-image: -webkit-gradient(linear, left top, left bottom, from(#82d344), to(#51af34)); background-image: -webkit-linear-gradient(top, #82d344, #51af34); background-image: -moz-linear-gradient(top, #82d344, #51af34); background-image: -o-linear-gradient(top, #82d344, #51af34); background-image: linear-gradient(to bottom, #82d344, #51af34); }

Se añaden las flechas con el ":before" pseudo-selector. Este selector de pseudo nos permite incluir algunos contenidos sin necesidad de añadir una nueva etiqueta en el html. Para crear ese efecto de la cinta usaremos un truco frontera para crear fácilmente formas utilizando sólo CSS, también se incluirán esta forma utilizando un pseudo-selector ":after".
.flex-direction-nav a:before { background: url("img/direction_nav.png") no-repeat scroll 0 0 transparent; content: ""; display: block; width: 27px; height: 27px; left: 11px; position: absolute; top: 2px; } .flex-direction-nav a:after { content: ""; display: block; height: 0; position: absolute; top: 35px; width: 0; }

Para finalizar los botones se sumarán las esquinas redondeadas, colocarlos a derecha e izquierda y añadir los "triangles" que harán que el efecto de la cinta.
.flex-direction-nav .flex-next { right: -5px; -webkit-border-radius: 3px 0 0 3px; -moz-border-radius: 3px 0 0 3px; border-radius: 3px 0 0 3px; } .flex-direction-nav .flex-prev { left: -5px; -webkit-border-radius: 0 3px 3px 0; -moz-border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0; } .flex-direction-nav .flex-next:before { background-position: -9px 0; left: 15px; } .flex-direction-nav .flex-prev:before { background-position: 0 0; } .flex-direction-nav .flex-next:after { right: 0; border-bottom: 5px solid transparent; border-left: 5px solid #31611e; } .flex-direction-nav .flex-prev:after { left: 0; border-bottom: 5px solid transparent; border-right: 5px solid #31611e; }

PASO 5 - Controles deslizantes
Los controles deslizantes son los pequeños círculos en el extremo de la corredera que permite hacer clic en una diapositiva. Nos posicionamos este recipiente en la parte inferior de la corredera. A continuación, vamos a crear los círculos utilizando el "border-radius" y la propiedad "box-shadow". Para el círculo diapositiva activa vamos a quitar la caja de sombra y añadir la misma CSS3 degradado que se utilizó en los botones
.flexslider .flex-control-nav { position: absolute; width: 100%; bottom: -40px; text-align: center; margin: 0 0 0 -10px; } .flex-control-nav li { display: inline-block; zoom: 1; } .flex-control-paging li a { display: block; cursor: pointer; text-indent: -9999px; width: 12px; height: 12px; margin: 0 3px; background-color: #b6b6b6 \9; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -webkit-box-shadow: inset 0 0 0 2px #b6b6b6; -moz-box-shadow: inset 0 0 0 2px #b6b6b6; box-shadow: inset 0 0 0 2px #b6b6b6; } .flex-control-paging li a.flex-active { background-color: #82d344; background-image: -webkit-gradient(linear, left top, left bottom, from(#82d344), to(#51af34)); background-image: -webkit-linear-gradient(top, #82d344, #51af34); background-image: -moz-linear-gradient(top, #82d344, #51af34); background-image: -o-linear-gradient(top, #82d344, #51af34); background-image: linear-gradient(to bottom, #82d344, #51af34); -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }

PASO 6 - Leyendas
Ya casi hemos llegado, vamos a añadir algunos estilos simples para los subtítulos. Ajuste el color de fondo a negro con un poco de transparencia con el modo de color RGBA. A continuación, vamos a colocarlo en la parte inferior de las diapositivas.
.flexslider .slides p { display: block; position: absolute; left: 0; bottom: 0; padding: 0 5px; margin: 0; font-family: Helvetica, Arial, sans-serif; font-size: 12px; font-weight: bold; text-transform: uppercase; line-height: 20px; color: white; background-color: #222222; background: rgba(0,0,0, .9); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; }


Este es el final de este tutorial. Espero que les sea útil y haya aprendido algo nuevo de ella. Siéntase libre de utilizar este control en su próximo proyecto o sitio web personal. No te olvides de seguirnos para más artículos, tutoriales y recursos de calidad.