Bootstrap Slider

<!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>Bootstrap Slider</title> <link rel="stylesheet" href="https://cssslider.com/styles.min.css" type="text/css" /> <style type="text/css"> #rt-showcase.slider-container { background: #F5F6F8; } .slider-container { padding-top: 20px; } .slider-container .csslider1 { position: relative; display: block; margin: 0 auto !important; } </style> </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"> <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="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 class="active"> <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/bootstrap-slider-10.html" title="English"><i class="flag-en"></i> EN</a></li> <li><a class="item" href="https://cssslider.com/es/bootstrap-slider-10.html" title="Español"><i class="flag-es"></i> ES</a></li> <li><a class="item" href="https://cssslider.com/it/bootstrap-slider-10.html" title="Italiano"><i class="flag-it"></i> IT</a></li> <li><a class="item" href="https://cssslider.com/pt/bootstrap-slider-10.html" title="Português"><i class="flag-pt"></i> PT</a></li> <li><a class="item" href="https://cssslider.com/da/bootstrap-slider-10.html" 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/bootstrap-slider-10.html" title="Deutsch"><i class="flag-de"></i> DE</a></li> <li><a class="item" href="https://cssslider.com/nl/bootstrap-slider-10.html" title="Nederlands"><i class="flag-nl"></i> NL</a></li> <li><a class="item" href="https://cssslider.com/ja/bootstrap-slider-10.html" title="日本語"><i class="flag-ja"></i> JA</a></li> <li><a class="item" href="https://cssslider.com/no/bootstrap-slider-10.html" title="Norsk"><i class="flag-no"></i> NO</a></li> <li><a class="item" href="https://cssslider.com/sv/bootstrap-slider-10.html" 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"> <link rel="stylesheet" href="https://cssslider.com/sliders/demo-10/engine1/style.css">   <script type="text/javascript" src="https://cssslider.com/sliders/demo-10/engine1/gestures.js"></script> <div class='csslider1 autoplay '> <input name="cs_anchor1" id='cs_slide1_0' type="radio" class='cs_anchor slide'> <input name="cs_anchor1" id='cs_slide1_1' type="radio" class='cs_anchor slide'> <input name="cs_anchor1" id='cs_slide1_2' type="radio" class='cs_anchor slide'> <input name="cs_anchor1" id='cs_play1' type="radio" class='cs_anchor' checked> <input name="cs_anchor1" id='cs_pause1_0' type="radio" class='cs_anchor pause'> <input name="cs_anchor1" id='cs_pause1_1' type="radio" class='cs_anchor pause'> <input name="cs_anchor1" id='cs_pause1_2' type="radio" class='cs_anchor pause'> <a class="cs_lnk" href="https://mobirise.com/bootstrap-carousel/">bootstrap slider</a> <ul> <div> <img src="https://cssslider.com/sliders/demo-10/data1/images/1.jpg" style="width: 100%;"> </div> <li class='num0 img'> <img src="https://cssslider.com/sliders/demo-10/data1/images/1.jpg" alt='HTML5 slider ' title='Material Design' /> </li> <li class='num1 img'> <a href="https://mobirise.com/bootstrap-carousel/" target="_blank"><img src="https://cssslider.com/sliders/demo-10/data1/images/2.jpg" alt='bootstrap slider' title='Material Design' /></a> </li> <li class='num2 img'> <img src="https://cssslider.com/sliders/demo-10/data1/images/3.jpg" alt='HTML5 slider ' title='Material Design' /> </li> </ul> <a class="cs_lnk" href="https://cssslider.com">Bootstrap responsive slideshow</a> <div class='cs_description'> <label class='num0'> <span class="cs_title"><span class="cs_wrapper">Material Design</span></span> <br/><span class="cs_descr"><span class="cs_wrapper">Material design is a design language developed by Google and announced at the Google I/O conference on June 25, 2014. </span></span> </label> <label class='num1'> <span class="cs_title"><span class="cs_wrapper">Material Design</span></span> <br/><span class="cs_descr"><span class="cs_wrapper">Expanding upon the "card" motifs first seen in Google Now, it is a cleaner design with increased use of grid-based layouts, responsive animations and transitions, padding, and depth effects such as lighting and shadows.</span></span> </label> <label class='num2'> <span class="cs_title"><span class="cs_wrapper">Material Design</span></span> <br/><span class="cs_descr"><span class="cs_wrapper">Designer MatГas Duarte explained that "unlike real paper, our digital material can expand and reform intelligently. Material has physical surfaces and edges. Seams and shadows provide meaning about what you can touch." Google states that their new design language is based on paper and ink.</span></span> </label> </div> <div class='cs_arrowprev'> <label class='num0' for='cs_slide1_0'><span><i></i></span></label> <label class='num1' for='cs_slide1_1'><span><i></i></span></label> <label class='num2' for='cs_slide1_2'><span><i></i></span></label> </div> <div class='cs_arrownext'> <label class='num0' for='cs_slide1_0'><span><i></i></span></label> <label class='num1' for='cs_slide1_1'><span><i></i></span></label> <label class='num2' for='cs_slide1_2'><span><i></i></span></label> </div> <div class='cs_bullets'> <label class='num0' for='cs_slide1_0'> <span class='cs_point'></span> <span class='cs_thumb'><img src="https://cssslider.com/sliders/demo-10/data1/tooltips/1.jpg" alt='HTML5 slider ' title='Material Design' /></span> </label> <label class='num1' for='cs_slide1_1'> <span class='cs_point'></span> <span class='cs_thumb'><a href="https://mobirise.com/bootstrap-carousel/" target="_blank"><img src="https://cssslider.com/sliders/demo-10/data1/tooltips/2.jpg" alt='bootstrap image slider' title='Material Design' /></a></span> </label> <label class='num2' for='cs_slide1_2'> <span class='cs_point'></span> <span class='cs_thumb'><img src="https://cssslider.com/sliders/demo-10/data1/tooltips/3.jpg" alt='CSS3 slideshow ' title='Material Design' /></span> </label> </div> </div> </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> </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 wordpress slideshow " 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/css-slideshow-24.html"> <img src="https://cssslider.com/sliders/demo-24/thumb.jpg" alt="CSS Slideshow bootstrap " class="sprocket-mosaic-image" /> <span class="sprocket-mosaic-link-text">CSS Slideshow</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/slider-html-22.html"> <img src="https://cssslider.com/sliders/demo-22/thumb.jpg" alt="Slider HTML html5 carousel " class="sprocket-mosaic-image" /> <span class="sprocket-mosaic-link-text">Slider HTML</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/non-jquery-carousel-7.html"> <img src="https://cssslider.com/sliders/demo-7/thumb.jpg" alt="non-jQuery Carousel html slideshow " class="sprocket-mosaic-image" /> <span class="sprocket-mosaic-link-text">non-jQuery Carousel</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="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" style="margin-top: 0;"> <div class="module-surround"> <div class="module-content"> <div id="download" class="customfp-feature rt-center rt-big-title">  <div class="rt-readon-row"> <a href="https://cssslider.com/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="https://cssslider.com/cssslider-mac-setup.zip" class="readon rt-large-button download-button"><span class="icon-apple"></span> Téléchargement pour Mac</a> </div>  <div class="clear"></div> <div class="clear"></div> </div> </div> </div> </div> </div> <div class="clear"></div> </div> </div>   <div id="rt-content" class="rt-overlay-light"> <div class="rt-container"> <div class="rt-grid-12 rt-alpha rt-omega"> <div class="rt-block fp-feature rt-big-title"> <div class="module-surround"> <div class="module-content"> <div class="customfp-feature"> <div class="gantry-width-80 gantry-width-block rt-margin-auto"> <h2 class="entry-title"> Slide Effect & Bootstrap Template Bootstrap Slider</h2> <p>Ce slider CSS est très bien conçu et met plus l'emphase sur la légende que beaucoup d'autres sliders. Il est très utile pour les sites qui ont besoin de communiquer des informations autant que des images. </p> <p align="center"><img src="https://cssslider.com/sliders/demo-10/preview.jpg" style="border: 0px"></p> <p>Il propose deux flèches de navigation sont présente à tout instant, et une légende en bas au centre faite d'un titre et d'un paragraphe de text, et d'une série de cercles de navigation en bas qui permettent à l'utilisateur de choisir quelle diapo afficher. </p> <p>Cette démo a un effet « ombre » très intéressant sur ses côtés. Il permet aux éléments de navigations, surtout les flèches, d'être plus visible, et il réduit l'importance des images. Ce slider est parfait pour du texte complémenté par une image, plutôt que l'inverse. </p> <p>Les flèches de navigation sont des têtes de flèches blanches semi-transparentes avec un effet d'ombre qui leur donne de la profondeur. Quand vous passez dessus, l'ombre de ce côté augmente et la tête de flèche devient plus opaque et donc plus claire. En cliquant sur les flèches on active le cycle d'images. </p> <p>La légende est en lettres blanches Helvetica Neue, sans doute une des polices sans-serif les plus reconnaissables. Presque intemporelle, elle convient à toute les ambiances. </p> <p>Le texte a un petit effet d'ombre qui l'aide à se démarquer de l'image en fond et lui donne de la profondeur. Le texte apparaît directement sur l'image, et vous devez vous assurer que la couleur du texte et celles des images contrastent suffisamment l'une avec les autres pour que la légende soit lisible. </p> <p>On trouve aussi des puces de navigation transparentes et bordées de blanc, en bas au centre. En passant dessus on fait apparaître en aperçu entouré de blanc. </p> <p>Ce slider utilise une structure de type bootstrap, il est dont très facile de le personnaliser. </p> <p>Fonctionnant uniquement sur CSS, il marche sur les navigateurs qui n'utilisent pas Jquery et Javascript. Il est aussi très rapide à charger, en l'absence de code ou d'images javascript.Il est donc parfais pour les développeurs mobiles qui veulent un slider moderne avec du répondant. </p> <p>Puisque cette échantillon est développé avec HTML5 et CSS il se place bien sur les moteurs de recherche, un avantage vue son emphase sur le texte. Toutes les légendes de votre diaporama seront aux normes SEO. </p> </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"> © 2015 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> </body> </html>

CINXE.COM

Bootstrap Slider