Excelente Slider en CSS y jQuery gratis y fácil de usar

6

Hace un tiempo un compañero de estudios me pregunto si conocía algún slider que sea fácil de usar y que fuera simple, pasar una imagen a la otra. Le dije que en PuertoPixel.com había una nota con 20 slider con jQuery que podrían servirle. Luego, buscando en los archivos, encontré dos notas más, una llamada Tiny Circleslider: Un Slider circular y otra llamada uBillboard, slider en jQuery.

Hoy les quiero traer un excelente slideshow creado con HTML, CSS y jQuery con efecto de transición y una imagen miniatura que hace de preview con efecto tooltips para la imagen siguiente o anterior.

slider-css-jquery

En el archivo van a encontrar el archivo index.html que contiene el slider y 3 carpetas una llamada CSS en donde se encuentran las hojas de estilos, una llamada JS que contiene los archivo java y una llamada IMAGES que contiene todas las imágenes de la interface de slide y a su vez dos carpetas, una llamada large que es donde van las imágenes grandes en un tamaño de 820 x 410 pixeles y otra llamada thumbs que es donde se guardan las miniaturas de las imágenes grandes, estas miniaturas deben tener un tamaño de 120 x 120 pixeles y deben ser creadas manualmente.

Código HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<title>Tutorial Slide CSS+jQuery - PuertoPixel.com</title> 
        <link rel="stylesheet" type="text/css" href="css/demo.css" />
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <link href='http://fonts.googleapis.com/css?family=Rochester' rel='stylesheet' type='text/css' />
        <noscript>
            <style>
                .cn-images img{position: relative;display: block;border-bottom: 5px solid #d0ab47;} 
                .cn-slideshow{height: auto;}
            </style>
        </noscript>
		<script id="barTmpl" type="text/x-jquery-tmpl">
            <div class="cn-bar">
                <div class="cn-nav">
					<a href="#" class="cn-nav-prev">
                        <span>Anterior</span>
						<div style="background-image:url(${prevSource});"></div> 
					</a>
					<a href="#" class="cn-nav-next">
                        <span>Siguiente</span>
						<div style="background-image:url(${nextSource});"></div>
					</a>
                </div><!-- cn-nav -->
                <div class="cn-nav-content">
                    <div class="cn-nav-content-prev">
                        <span>Anterior</span>
                        <h3>${prevTitle}</h3>
                    </div>
                    <div class="cn-nav-content-current">
                        <span>Viendo..</span>
                        <h2>${currentTitle}</h2>
                    </div>
                    <div class="cn-nav-content-next">
                        <span>Siguiente</span>
                        <h3>${nextTitle}</h3>
                    </div>
                </div>
            </div>
		</script>
    </head>
    <body>
 
<div style="height:90px; width:728px; padding-top:10px; margin:0px auto; ">
 
</div>
 
        <div class="container">
            <div class="wrapper">
                <div id="cn-slideshow" class="cn-slideshow">
                    <div class="cn-images">
                        <img src="images/large/1.jpg" alt="image01" title="Imagen 1" data-thumb="images/thumbs/1.jpg" style="display:block;"/>
                        <img src="images/large/2.jpg" alt="image02" title="Imagen 2" data-thumb="images/thumbs/2.jpg"/>
                        <img src="images/large/3.jpg" alt="image03" title="Imagen 3" data-thumb="images/thumbs/3.jpg"/>
                        <img src="images/large/4.jpg" alt="image04" title="Imagen 4" data-thumb="images/thumbs/4.jpg"/>
                    </div><!-- images -->
                </div><!-- slideshow -->
 
            </div>
        </div>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
		<script type="text/javascript" src="js/jquery.tmpl.min.js"></script>
		<script type="text/javascript" src="js/jquery.slideshow.js"></script>
        <script type="text/javascript">
            $(function() {
				$('#cn-slideshow').slideshow();
            });
        </script>
</body>
</html>
Quizas te interese   25 fonts de Navidad
<title>Tutorial Slide CSS+jQuery - PuertoPixel.com</title> <link rel="stylesheet" type="text/css" href="css/demo.css" /> <link rel="stylesheet" type="text/css" href="css/style.css" /> <link href='http://fonts.googleapis.com/css?family=Rochester' rel='stylesheet' type='text/css' /> <noscript> <style> .cn-images img{position: relative;display: block;border-bottom: 5px solid #d0ab47;} .cn-slideshow{height: auto;} </style> </noscript> <script id="barTmpl" type="text/x-jquery-tmpl"> <div class="cn-bar"> <div class="cn-nav"> <a href="#" class="cn-nav-prev"> <span>Anterior</span> <div style="background-image:url(${prevSource});"></div> </a> <a href="#" class="cn-nav-next"> <span>Siguiente</span> <div style="background-image:url(${nextSource});"></div> </a> </div><!-- cn-nav --> <div class="cn-nav-content"> <div class="cn-nav-content-prev"> <span>Anterior</span> <h3>${prevTitle}</h3> </div> <div class="cn-nav-content-current"> <span>Viendo..</span> <h2>${currentTitle}</h2> </div> <div class="cn-nav-content-next"> <span>Siguiente</span> <h3>${nextTitle}</h3> </div> </div> </div> </script> </head> <body> <div style="height:90px; width:728px; padding-top:10px; margin:0px auto; "> </div> <div class="container"> <div class="wrapper"> <div id="cn-slideshow" class="cn-slideshow"> <div class="cn-images"> <img src="images/large/1.jpg" alt="image01" title="Imagen 1" data-thumb="images/thumbs/1.jpg" style="display:block;"/> <img src="images/large/2.jpg" alt="image02" title="Imagen 2" data-thumb="images/thumbs/2.jpg"/> <img src="images/large/3.jpg" alt="image03" title="Imagen 3" data-thumb="images/thumbs/3.jpg"/> <img src="images/large/4.jpg" alt="image04" title="Imagen 4" data-thumb="images/thumbs/4.jpg"/> </div><!-- images --> </div><!-- slideshow --> </div> </div> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.tmpl.min.js"></script> <script type="text/javascript" src="js/jquery.slideshow.js"></script> <script type="text/javascript"> $(function() { $('#cn-slideshow').slideshow(); }); </script> </body> </html>

Ver demoDescargar

6 COMENTARIOS

  1. Está excelente, salvo que cuando lo subo a la web no se ve la transición de imágenes. Igual con la demo que tú pusiste. ?Qué puede ser? Gracias. saludos cordiales

Dejar una respuesta

Please enter your comment!
Please enter your name here