Slider sin jQuery, un slider de imágenes de CSS puro

<!DOCTYPE html> <html xml:lang="es" lang="es"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>Slider sin jQuery, un slider de imágenes de CSS puro</title> <meta name="description" content="Slider flexible con CSS Puro. Animaciones geniales y plantillas. Creador visual - ¡sin scripts!" /> <link rel="stylesheet" href="../styles.min.css" type="text/css"/> </head> <body class="logo-type-preset1 header-headroom-enabled-scroll showcase-bg-transition-top-to-bottom showcase-type-preset1 feature-type-preset1 mainbody-overlay-light extension-type-preset1 footer-overlay-dark copyright-overlay-dark font-family-anacron font-size-is-default menu-type-dropdownmenu layout-mode-responsive col12 option-com-content menu-home -feb14-home" id="scrollheader"> <div id="rt-page-surround"> <input type="radio" name="devices" id="device-fullwidth" class="devices-input" checked> <input type="radio" name="devices" id="device-laptop" class="devices-input"> <input type="radio" name="devices" id="device-mobile" class="devices-input"> <header id="rt-header-surround" class="scrollheader"><div id="rt-header" class="rt-overlay-light"> <div class="rt-container"> <div class="rt-grid-3 rt-alpha"> <div class="rt-logo-block"> <a href="./" id="rt-logo">css<em>Slider</em><span>.com</span></a> </div> </div> <div class="rt-grid-9 rt-omega"> <div class="devices-block"> <label for="device-fullwidth" title="Full Width" class="readon fullwidth"><i class="icon-fullwidth"></i></label> <label for="device-laptop" title="Boxed" class="readon laptop"><i class="icon-laptop"></i></label> <label for="device-mobile" title="Mobile" class="readon mobile"><i class="icon-mobile"></i></label> </div> <div class="menu-block"> <div class="gf-menu-device-container responsive-type-panel"></div>  <script type="text/javascript" src="/bf5.js"></script>   <ul class="gf-menu l1"> <li> <a class="item" href="https://cssslider.com/es/demos.html"><i class="icon-th"></i> Demostraciones</a> </li> <li> <a class="item" href="https://cssslider.com/es/help/"><i class="icon-info-circle"></i> Help</a> </li> <li> <a class="item" href="https://cssslider.com/download.php"><i class="icon-download-alt"></i> Descargar</a> </li> <li> <a class="item" href="https://secure.avangate.com/order/checkout.php?PRODS=4628742&QTY=1&CART=1&CARD=2&SHORT_FORM=1" onclick="_gaq.push(['_link', this.href]); return false;" rel="nofollow"><i class="icon-buy"></i> Comprar Ahora</a> </li> <li> <a class="item" href="#" title="Español"><i class="flag-es"></i> ES <i class="icon-caret-down"></i></a> <span class="dropdown-spacer"></span> <div class="dropdown columns-2 flags" style="width:134px;left:auto;right:0;"> <div class="column col1" style="width:67px;"> <ul> <li><a class="item" href="https://cssslider.com/" title="English"><i class="flag-en"></i> EN</a></li> <li><a class="item" href="https://cssslider.com/fr/" title="Français"><i class="flag-fr"></i> FR</a></li> <li><a class="item" href="https://cssslider.com/it/" title="Italiano"><i class="flag-it"></i> IT</a></li> <li><a class="item" href="https://cssslider.com/pt/" title="Português"><i class="flag-pt"></i> PT</a></li> <li><a class="item" href="https://cssslider.com/da/" title="Dansk"><i class="flag-da"></i> DA</a></li> </ul> </div> <div class="column col2" style="width:67px;"> <ul> <li><a class="item" href="https://cssslider.com/de/" title="Deutsch"><i class="flag-de"></i> DE</a></li> <li><a class="item" href="https://cssslider.com/nl/" title="Nederlands"><i class="flag-nl"></i> NL</a></li> <li><a class="item" href="https://cssslider.com/ja/" title="日本語"><i class="flag-ja"></i> JA</a></li> <li><a class="item" href="https://cssslider.com/no/" title="Norsk"><i class="flag-no"></i> NO</a></li> <li><a class="item" href="https://cssslider.com/sv/" title="Svenska"><i class="flag-sv"></i> SV</a></li> </ul> </div> </div> </li> </ul>  <div class="clear"></div> </div> </div> <div class="clear"></div> </div> </div> </header>  <section id="rt-showcase-surround"> <div id="rt-showcase" class="slider-container rt-overlay-dark"> <div class="rt-container slider-container"> <div class="rt-grid-12 rt-alpha rt-omega"> <iframe id="slider-iframe" src="../sliders/home/slider-es.html" frameborder="0"></iframe> </div> <div class="clear"></div> </div> </div> </section>  <section id="rt-main-surround"><div id="rt-transition"> <div id="rt-mainbody-surround"> <div id="rt-top" class="rt-overlay-light"> <div class="rt-container hide-pointer"> <div class="rt-grid-12 rt-alpha rt-omega"> <div class="rt-block fp-top rt-center rt-big-title"> <div class="module-surround"> <div class="module-content"> <div id="download" class="customfp-top rt-center rt-big-title"> <p>Crea bonitos sliders con imágenes completamente en CSS. Sin jQuery, sin JavaScript, sin iconos de imágenes, ¡sin código! Es tremendamente rápido, ligero, respondedor y preparado para Retina. Funciona en todos los dispositivos modernos y navegadores. KenBurns, difuminados, efecto zoom y skins disponibles (habrá más próximamente). ¡Descarga un generador de sliders gratuito para Windows y Mac ahora! </p> </div>  <div class="rt-readon-row"> <a href="../cssslider-win-setup.zip" class="readon rt-large-button download-button download-for-win"><span class="icon-windows"></span> Descarga para Win</a> <a href="../cssslider-mac-setup.zip" class="readon rt-large-button download-button"><span class="icon-apple"></span> Descarga para Mac</a> </div>  </div> </div> </div> </div> <div class="clear"></div> </div> </div>  <div id="rt-utility" class="rt-overlay-light"> <div class="rt-container"> <div class="rt-grid-12 rt-alpha rt-omega"> <div id="demos" class="rt-block fp-utility rt-title-center rt-big-title"> <div class="module-title "><h2 class="title"><span>Demostraciones</span></h2></div> <div class="module-surround"> <div class="module-content"> <div class="sprocket-mosaic"> <div class="sprocket-mosaic-overlay"><div class="css-loader-wrapper"><div class="css-loader"></div></div></div> <ul class="sprocket-mosaic-container sprocket-mosaic-columns-4"> <li> <div class="sprocket-mosaic-item"> <div style="display: none;"></div> <div class="sprocket-padding"> <div class="sprocket-mosaic-image-container"> <a href="https://cssslider.com/es/jquery-content-slider-31.html"> <img src="https://cssslider.com/sliders/demo-31/thumb.jpg" alt="no-jQuery Content Slider css3 slider " class="sprocket-mosaic-image" /> <span class="sprocket-mosaic-link-text">no-jQuery Content Slider</span> <span class="sprocket-mosaic-hover"></span> <span class="sprocket-mosaic-hovercontent" data-content="Ver Demo"></span> </a> </div> <div class="sprocket-mosaic-text"></div> </div> </div> </li> <li> <div class="sprocket-mosaic-item"> <div style="display: none;"></div> <div class="sprocket-padding"> <div class="sprocket-mosaic-image-container"> <a href="https://cssslider.com/es/image-slider-jquery-30.html"> <img src="https://cssslider.com/sliders/demo-30/thumb.jpg" alt="Image Slider w/o jQuery bootstrap slideshow " class="sprocket-mosaic-image" /> <span class="sprocket-mosaic-link-text">Image Slider w/o jQuery</span> <span class="sprocket-mosaic-hover"></span> <span class="sprocket-mosaic-hovercontent" data-content="Ver Demo"></span> </a> </div> <div class="sprocket-mosaic-text"></div> </div> </div> </li> <li> <div class="sprocket-mosaic-item"> <div style="display: none;"></div> <div class="sprocket-padding"> <div class="sprocket-mosaic-image-container"> <a href="https://cssslider.com/es/slideshow-jquery-29.html"> <img src="https://cssslider.com/sliders/demo-29/thumb.jpg" alt="Slideshow w/o jQuery html5 slideshow " class="sprocket-mosaic-image" /> <span class="sprocket-mosaic-link-text">Slideshow w/o jQuery</span> <span class="sprocket-mosaic-hover"></span> <span class="sprocket-mosaic-hovercontent" data-content="Ver Demo"></span> </a> </div> <div class="sprocket-mosaic-text"></div> </div> </div> </li> <li> <div class="sprocket-mosaic-item"> <div style="display: none;"></div> <div class="sprocket-padding"> <div class="sprocket-mosaic-image-container"> <a href="https://cssslider.com/es/carousel-jquery-28.html"> <img src="https://cssslider.com/sliders/demo-28/thumb.jpg" alt="Carousel w/o jQuery jquery carousel " class="sprocket-mosaic-image" /> <span class="sprocket-mosaic-link-text">Carousel w/o jQuery</span> <span class="sprocket-mosaic-hover"></span> <span class="sprocket-mosaic-hovercontent" data-content="Ver Demo"></span> </a> </div> <div class="sprocket-mosaic-text"></div> </div> </div> </li> </ul> </div> </div> </div> </div> </div> <div class="clear"></div> </div> </div>   <div id="features" class="rt-overlay-light"><div class="rt-container"> <div class="rt-grid-3 rt-alpha"> <div class="rt-block rt-center"> <div class="module-surround"> <div class="module-content"> <div class="customrt-center"> <span class="rt-icon"><span class="icon-code title"></span></span> <h1 class="title rt-capitalize">Slider completamente en CSS</h1> <p>Olvídate de usar JavaScript – este slider de imágenes está creado con CSS y HTML únicamente.</p> </div> </div> </div> </div> <div class="rt-block rt-center"> <div class="module-surround"> <div class="module-content"> <div class="customrt-center"> <span class="rt-icon"><span class="icon-check title"></span></span> <h1 class="title rt-capitalize">Cruzado entre navegadores</h1> <p>Funciona en todos los dispositivos y navegadores modernos, incluyendo IE antiguos (con js fallback opcional)</p> </div> </div> </div> </div> </div> <div class="rt-grid-3"> <div class="rt-block rt-center"> <div class="module-surround"> <div class="module-content"> <div class="customrt-center"> <span class="rt-icon"><span class="icon-play title"></span></span> <h1 class="title rt-capitalize">Efectos CSS3</h1> <p>Animaciones suavizadas y fluidas aceleradas por hardware que funcionan mucho mejor que las mediadas por jQuery, especialmente en dispositivos móviles. </p> </div> </div> </div> </div> <div class="rt-block rt-center"> <div class="module-surround"> <div class="module-content"> <div class="customrt-center"> <span class="rt-icon"><span class="icon-eye title"></span></span> <h1 class="title rt-capitalize">Preparado para Retina</h1> <p>Los controles del slider son una fuente de iconos vectorial y se ven a la perfección en pantallas de alta resolución.</p> </div> </div> </div> </div> </div> <div class="rt-grid-3 rt-omega"> <div class="rt-block rt-center"> <div class="module-surround"> <div class="module-content"> <div class="customrt-center"> <span class="rt-icon"><span class="icon-rocket title"></span></span> <h1 class="title rt-capitalize">Slider no-jQuery</h1> <p>No más jQuery lento y pesado con montones de código inutilizado</p> </div> </div> </div> </div> <div class="rt-block rt-center"> <div class="module-surround"> <div class="module-content"> <div class="customrt-center"> <span class="rt-icon"><span class="icon-sun title"></span></span> <h1 class="title rt-capitalize">Cualquier color</h1> <p>Slider CSS que no usa las imágenes para el estilo, por lo que el color de la skin puede ser fácilmente cambiado </p> </div> </div> </div> </div> </div> <div class="rt-grid-3 rt-alpha"> <div class="rt-block rt-center"> <div class="module-surround"> <div class="module-content"> <div class="customrt-center"> <span class="rt-icon"><span class="icon-external-link title"></span></span> <h1 class="title rt-capitalize">Slider flexible</h1> <p>Se incorpora perfectamente en tu página, independientemente del tamaño de la pantalla </p> </div> </div> </div> </div> <div class="rt-block rt-center"> <div class="module-surround"> <div class="module-content"> <div class="customrt-center"> <span class="rt-icon"><span class="icon-flag-checkered title"></span></span> <h1 class="title rt-capitalize">Sin código</h1> <p>Crea tu propio slider en segundos con el creador visual</p> </div> </div> </div> </div> </div> <div class="clear"></div> </div> </div>   <div id="rt-feature" class="rt-overlay-light"> <div class="rt-container"> <div class="rt-grid-12 rt-alpha rt-omega"> <div class="rt-block fp-feature rt-center rt-big-title"> <div class="module-surround"> <div class="module-title"> <h2 class="title"><span>Slider sin jQuery?</span></h2> </div> <div class="module-content"> <div class="customfp-feature rt-center rt-big-title"> <div class="gantry-width-80 gantry-width-block rt-center rt-margin-auto"> <p>Hoy día parece que todo el mundo está encantado con los sliders de imágenes, están por todas partes. Y, por supuesto, puedes encontrar numerosos sliders de imágenes que te permiten mostrar varias fotos e imágenes en tu web, pero son todos muy inflexibles con el mismo requerimiento de jQuery y JavaScript. ¿Por qué utilizar librerías pesadas cuando puede ser hecho con un CSS limpio y ligero? cssSlider es el único slider de CSS puro que ofrece una combinación de geniales efectos CSS3, skins pre-fabricadas, fuente de iconos, navegación completamente funcional y creación de sliders sin código. </p> </div> <div class="clear"></div> <span class="rt-title-divider"></span> <div class="gantry-tr"> <div class="gantry-width-33 gantry-width-block rt-left"> <div class="gantry-width-spacer"> <h2><span class="title-icon icon-play"></span><span>Transiciones impresionantes</span></h2> <p>cssSlider contiene un CSS3 puro y transiciones con aceleración de hardware para impresionar a tus usuarios y ayudarte a mantener su atención centrada en tu sitio.</p> </div> </div> <div class="gantry-width-33 gantry-width-block rt-left"> <div class="gantry-width-spacer"> <h2><span class="title-icon icon-asterisk"></span><span>Hermosos temas para Slider</span></h2> <p>No tienes sólo una apariencia con cssSlider. Esta increíble herramienta trae incorporado un sistema para elegir colores, temas y efectos entre una alucinante colección de temas pre-fabricados que vienen incluidos.</p> </div> </div> <div class="gantry-width-33 gantry-width-block rt-left"> <div class="gantry-width-spacer"> <h2><span class="title-icon icon-code"></span><span>CSS puro</span></h2> <p>cssSlider está basado sólo en CSS (no en Flash, ni jQuery ni JavaScript), por lo que funcionará en cualquier navegador, sin necesidad de plugins. </p> </div> </div> </div> <div class="gantry-tr"> <div class="gantry-width-33 gantry-width-block rt-left"> <div class="gantry-width-spacer"> <h2><span class="title-icon icon-mobile"></span><span>Móvil</span></h2> <p>Tus usuarios no sólo te visitan desde la comodidad de su escritorio. Con un diseño adaptable, cssSlider se verá bien en todos los dispositivos sin esfuerzo, directamente.</p> </div> </div> <div class="gantry-width-33 gantry-width-block rt-left"> <div class="gantry-width-spacer"> <h2><span class="title-icon icon-refresh"></span><span>Previsualización a tiempo real</span></h2> <p>Previsualiza tu slider instantáneamente y haz los cambios pertinentes en el área de previsualización. </p> </div> </div> <div class="gantry-width-33 gantry-width-block rt-left"> <div class="gantry-width-spacer"> <h2><span class="title-icon icon-desktop"></span><span>Preparado para Retina</span></h2> <p>Las flechas de anterior/siguiente y otros controles son en realidad una fuente de iconos vectoriales, haciendo que sean resolución-independientes e ideales para pantallas retina.</p> </div> </div> </div> <div class="gantry-tr"> <div class="gantry-width-33 gantry-width-block rt-left"> <div class="gantry-width-spacer"> <h2><span class="title-icon icon-magic"></span><span>Simple de usar</span></h2> <p>Fácil de usar, puedes asignar distintas skins, colores y efectos de la librería a tu slider. ¡No hay que saber nada de programación! No tendrás que escribir ni una sola línea de código.</p> </div> </div> <div class="gantry-width-33 gantry-width-block rt-left"> <div class="gantry-width-spacer"> <h2><span class="title-icon icon-external-link"></span><span>Diseño flexible</span></h2> <p>Con cada vez más y más usuarios navegando tu web desde dispositivos móviles, es crítico que tu sitio funcione y se vea correctamente en smartphones y tablets. cssSlider se ajusta automáticamente en tamaño respondiendo al tamaño de ventana del navegador en móviles y tablets. </p> </div> </div> <div class="gantry-width-33 gantry-width-block rt-left"> <div class="gantry-width-spacer"> <h2><span class="title-icon icon-gear"></span><span>Altamente personalizable</span></h2> <p>cssSlider tiene dos modos de configuración: Básico y Avanzado. Escoge entre un número de estilos incorporados para mantener las cosas sencillas o sumérgete en la configuración y edición para tener un control completo.</p> </div> </div> </div> <div class="gantry-tr"> <div class="gantry-width-33 gantry-width-block rt-left"> <div class="gantry-width-spacer"> <h2><span class="title-icon icon-crop"></span><span>Recorte automático de imágenes y ajuste de tamaño</span></h2> <p>No necesitarás cinco programas distintos de edición de fotografías para preparar las imágenes para tu slider. cssSlider hace todo el trabajo de recortar y reajustar tu imagen automáticamente.</p> </div> </div> <div class="gantry-width-33 gantry-width-block rt-left"> <div class="gantry-width-spacer"> <h2><span class="title-icon icon-tint"></span><span>Combinaciones de colores</span></h2> <p>¿No estás seguro de qué color emplear en tu slider? No te preocupes, cada skin de cssSlider trae 6 sistemas de colores listos para usar para hacer tu decisión más fácil.</p> </div> </div> <div class="gantry-width-33 gantry-width-block rt-left"> <div class="gantry-width-spacer"> <h2><span class="title-icon icon-paperclip"></span><span>Arrastrar y soltar</span></h2> <p> Con esta alucinante funcionalidad, puedes añadir rápidamente o quitar diapositivas del slider, o cambiar el orden. ¡No podría ser más sencillo! </p> </div> </div> </div> <div class="gantry-tr"> <div class="gantry-width-33 gantry-width-block rt-left"> <div class="gantry-width-spacer"> <h2><span class="title-icon icon-bug"></span><span>Adaptado para SEO</span></h2> <p>Como el slider está construido con HTML5, incluso manteniendo su buen aspecto, los motores de búsqueda pueden acceder a él fácilmente. Esto significa que puedes agradar tanto a tus usuarios como a los motores de búsqueda como Google, ¡todo al mismo tiempo!</p> </div> </div> <div class="gantry-width-33 gantry-width-block rt-left"> <div class="gantry-width-spacer"> <h2><span class="title-icon icon-wrench"></span><span>Personaliza tu slider</span></h2> <p>Hay muchas configuraciones que puedes alterar, incluyendo bellos efectos de transición y coloridas skins, navegación anterior-siguiente, viñetas con minuaturas, autorreproducción, pausa/stop, anchura completa y otras opciones.</p> </div> </div> <div class="gantry-width-33 gantry-width-block rt-left"> <div class="gantry-width-spacer"> <h2><span class="title-icon icon-cloud"></span><span>Ligero y compatible</span></h2> <p>No emplea JavaScript para asegurar que tu página cargue rápido, sin esperar a que cargue el slider. Además, está diseñado para ser compatible con los estándares más avanzados.</p> </div> </div> </div> <div class="clear"></div>  <div class="rt-readon-row"> <a href="#download" class="readon rt-large-button download-button"><span class="icon-download-alt"></span> Descarga gratuita en Windows y Mac</a> </div>  <div class="clear"></div> </div> </div> </div> </div> </div> <div class="clear"></div> </div> </div>  </div> </div> </section><footer id="rt-footer-surround"> </footer><div id="rt-copyright" class="rt-overlay-dark"> <div class="rt-container"> <div class="rt-grid-4 rt-alpha"> <div class="rt-copyright-content rt-block"> © 2014 CSS Slider - All Rights Reserved. </div> </div> <div class="rt-grid-4"> <div class="clear"></div> <div class="rt-block"> <a href="#" id="gantry-totop" rel="nofollow"><span class="icon-angle-up rt-totop-icon"></span></a> </div> </div> <div class="rt-grid-4 rt-omega"> </div> <div class="clear"></div> </div> </div> </div> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-51685724-1']); _gaq.push(['_setDomainName', '.cssslider.com']); _gaq.push(['_setAllowLinker', true]); _gaq.push(['_setAllowHash', false]); if(document.cookie.match("(^|;\\s)__utma") && !/utmcsr=\(direct\)/.test(unescape(document.cookie))) { _gaq.push( ['_setReferrerOverride', ''],['_setCampNameKey', 'aaan'],['_setCampMediumKey', 'aaam'], ['_setCampSourceKey', 'aaas'],['_setCampTermKey', 'aaat'],['_setCampContentKey', 'aaac'], ['_setCampCIdKey', 'aaaci']) } _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> <script type="text/javascript" src="../js/adjast-slider.js"></script> </body> </html>

CINXE.COM

Slider sin jQuery, un slider de imágenes de CSS puro