Slider sans jQuery, Slider en pure CSS

<!DOCTYPE html> <html xml:lang="fr" lang="fr"> <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 sans jQuery, Slider en pure CSS</title> <meta name="description" content="Slider Responsive en Pure CSS. D’incroyables animations et modèles. Editeur Visuel – Aucune programmation nécessaire!" /> <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/fr/demos.html"><i class="icon-th"></i> Démos Live</a> </li> <li> <a class="item" href="https://cssslider.com/fr/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> Téléchargement</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> Acheter</a> </li> <li> <a class="item" href="#" title="Français"><i class="flag-fr"></i> FR <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/es/" title="Español"><i class="flag-es"></i> ES</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-fr.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>Créez d’incroyables Sliders entièrement en CSS. Pas de jQuery, pas de JavaScript, aucune image, aucune programmation ! C’est incroyablement rapide, léger, responsive et adaptés aux écrans Retina. Fonctionne sur tout support et navigateur moderne. Les effets de Ken Burns, de diaporama, de disparition, de zoom et certains modèles nus sont disponibles (Plus à venir). Téléchargez un générateur de Slider gratuit pour Windows et Mac dès maintenant! </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> Téléchargement pour Win</a> <a href="../cssslider-mac-setup.zip" class="readon rt-large-button download-button"><span class="icon-apple"></span> Téléchargement pour 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>Démos Live</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/fr/jquery-content-slider-31.html"> <img src="https://cssslider.com/sliders/demo-31/thumb.jpg" alt="no-jQuery Content Slider css carousel " 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="Visualiser la Démo"></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/fr/image-slider-jquery-30.html"> <img src="https://cssslider.com/sliders/demo-30/thumb.jpg" alt="Image Slider w/o jQuery responsive slider " 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="Visualiser la Démo"></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/fr/slideshow-jquery-29.html"> <img src="https://cssslider.com/sliders/demo-29/thumb.jpg" alt="Slideshow w/o jQuery bootstrap carousel " 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="Visualiser la Démo"></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/fr/carousel-jquery-28.html"> <img src="https://cssslider.com/sliders/demo-28/thumb.jpg" alt="Carousel w/o jQuery bootstrap slider " 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="Visualiser la Démo"></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 Pure CSS</h1> <p>Ne vous souciez plus du JavaScript – Ce Slider a été réalisé uniquement en HTML et CSS </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">Multi-Navigateur</h1> <p>Fonctionne sur tout support et navigateur moderne, incluant les anciennes versions d’Internet Explorer (Avec l’option js activée) </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">Effets CSS3 </h1> <p>L’accélération matérielle rend les animations plus fluides qu’en Jquery, tout particulièrement sur mobile. </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">Adapté aux écrans Retina</h1> <p>Tous les contrôles du Slider sont issus de polices vectorisées et sont appropriés pour un affichage haute-résolution. </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 sans jQuery </h1> <p>Plus aucun jQuery contenant du code inutilisé, lourd et lent</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">N’importe quel coloris</h1> <p>Les Sliders CSS n’utilisent aucune image permettant de changer aisément sa couleur </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 Responsive</h1> <p>Le Slider s’adapte parfaitement à votre page peu importe la taille de l’écran </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">Aucune Programmation</h1> <p>Créez votre Slider en quelques secondes avec l’éditeur visuel</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 sans 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>Aujourd’hui, il semble que les gens soient tombés amoureux des Sliders. Bien sûr, vous pouvez de nombreux sliders vous permettant d’afficher différentes photos et images sur votre site, mais ils sont tous pour le moins dépouillés de fonctionnalités et requièrent l’utilisation de JavaScript et jQuery. Pourquoi utiliser des librairies lourdes lorsque tout peut être réalisé simplement en CSS ? cssSlider est le seul Slider CSS offrant la combinaison d’effets CSS3, de modèles pré-fais, d’icônes vectorielles, de contrôles de navigation entièrement fonctionnels ainsi qu’une création de slider ne nécessitant aucune programmation. </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>D’impressionnantes transitions</span></h2> <p>cssSlider comporte d’incroyables transitions accélérées matériellement pour impressionner vos utilisateurs et capter leur attention sur votre site.</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>De magnifiques thèmes pour Slider</span></h2> <p>Vous n’avez pas qu’un seul thème avec cssSlider. Cet incroyable Slider est distribué avec un sélecteur intégré de thèmes/couleurs/effets vous permettant de choisir parmi les thèmes pré-fais inclus!</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>Pure CSS</span></h2> <p>cssSlider est uniquement basé sur CSS (pas de Flash, pas de jQuery, pas de Javascript), il fonctionnera ainsi sur n’importe quel navigateur sans avoir recourt à un plugin supplémentaire.</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>Mobile</span></h2> <p>Vos utilisateurs ne visitent pas uniquement votre site dans le confort de leur bureau. Avec un design adaptatif, cssSlider s’adaptera sur tout support sans aucun effort. </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>Prévisualisation Live</span></h2> <p>Prévisualisez instantanément votre Slider ainsi que n’importe quel changement que vous faites dans la zone de prévisualisation.</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>Adapté aux écrans Retina</span></h2> <p>Les flèches prec./suiv et autres contrôles sont des images vectorielles issues de typographie, les rendant indépendants et idéals pour les écrans 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 à utiliser</span></h2> <p>Simple à utiliser, vous assignez simplement différents modèles, coloris, et effets depuis la librairie à votre Slider. Aucune connaissance en programmation n’est requise. Vous n’aurez pas à écrire une seule ligne de code ! </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>Responsive Design</span></h2> <p>UAvec de plus en plus d’utilisateurs navigant sur votre site via mobile, il est important que votre site puisse fonctionner correctement sur smartphone et tablettes cssSlider ajuste automatiquement la taille que ce soit sur ordinateur ou support mobile en se basant sur la taille de la fenêtre du navigateur. </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>Hautement personnalisable</span></h2> <p>Lancez cssSlider dans deux modes de configuration : Basique et Avancé. Choisissez parmi les nombreux thèmes proposés simplement ou plongez-vous dans la modification de la configuration de la manière que vous souhaitez pour un contrôle total.</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>Découpage et redimensionnement automatique d’image</span></h2> <p>Vous n’aurez pas besoin de cinq logiciels de retouche d’images différents pour que votre Slider soit prêt à l’emploi. cssSlider s’occupe de tout redimensionnement ou decoupage d’images pour vous automatiquement! </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>Combinaison de couleurs</span></h2> <p>Vous n’êtes pas sûr de la couleur à utiliser avec votre Slider ? Pas d’inquiétude, chaque thème cssSlider sont fournis en 6 palettes de couleurs prêtes à être utilisée pour vous aider dans votre choix.</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>Glisser-Déposer</span></h2> <p> Avec la fonctionnalité Glisser-Déposer, vous pouvez ajouter ou supprimer rapidement des diapositives de votre Slider, ou en changer l’ordre. Vous ne pouvez faire plus simple! </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>SEO Friendly</span></h2> <p>Etant donné que le Slider est en HTML5, les moteurs de recherche sont toujours à même d’agir efficacement. Cela signifie que vous pouvez faire plaisir à la fois à vos utilisateurs et aux moteurs de recherche tels quel Google ! </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>Personnalisez votre Slider</span></h2> <p>Il y a des dizaines de paramètres que vous pouvez régler, incluant de magnifiques effets de transition, des thèmes simples colorés, le système de navigation, les vignettes, la lecture automatique, pause/stop, le plein écran ainsi que d’autres options.</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>Léger et compatible</span></h2> <p>Il n’utilise pas JavaScript pour s’assurer que votre page se charge rapidement, évitant donc que le slider ne se charge. Il a été aussi étudié pour être aussi compatible que possible en utilisant les derniers standards.</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> Téléchargement gratuit pour Windows et 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 sans jQuery, Slider en pure CSS