Bootstrap Slider

<!DOCTYPE html> <html xml:lang="da" lang="da"> <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/da/demos.html"><i class="icon-th"></i> Live Demoer</a> </li> <li> <a class="item" href="https://cssslider.com/da/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> Download</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> Køb nu</a> </li> <li> <a class="item" href="#" title="Dansk"><i class="flag-da"></i> DA <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/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> </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/fr/bootstrap-slider-10.html" title="Français"><i class="flag-fr"></i> FR</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/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='CSS3 carousel ' 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">Wordpress image slider</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='Bootstrap 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='jQuery carousel ' 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>Live Demoer</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/da/bootstrap-carousel-8.html"> <img src="https://cssslider.com/sliders/demo-8/thumb.jpg" alt="Bootstrap Carousel html carousel " class="sprocket-mosaic-image" /> <span class="sprocket-mosaic-link-text">Bootstrap Carousel</span> <span class="sprocket-mosaic-hover"></span> <span class="sprocket-mosaic-hovercontent" data-content="Se 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/da/image-slider-6.html"> <img src="https://cssslider.com/sliders/demo-6/thumb.jpg" alt="Image Slider html5 slideshow " class="sprocket-mosaic-image" /> <span class="sprocket-mosaic-link-text">Image Slider</span> <span class="sprocket-mosaic-hover"></span> <span class="sprocket-mosaic-hovercontent" data-content="Se 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/da/image-gallery-5.html"> <img src="https://cssslider.com/sliders/demo-5/thumb.jpg" alt="Image Gallery wordpress carousel " class="sprocket-mosaic-image" /> <span class="sprocket-mosaic-link-text">Image Gallery</span> <span class="sprocket-mosaic-hover"></span> <span class="sprocket-mosaic-hovercontent" data-content="Se 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/da/non-jquery-slideshow-3.html"> <img src="https://cssslider.com/sliders/demo-3/thumb.jpg" alt="non-jQuery Slideshow wordpress slideshow " class="sprocket-mosaic-image" /> <span class="sprocket-mosaic-link-text">non-jQuery Slideshow</span> <span class="sprocket-mosaic-hover"></span> <span class="sprocket-mosaic-hovercontent" data-content="Se 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="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> Download til Win</a> <a href="https://cssslider.com/cssslider-mac-setup.zip" class="readon rt-large-button download-button"><span class="icon-apple"></span> Download til 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 Animation & Bootstrap Theme Bootstrap Slider</h2> <p>Denne slider, som udelukkende er i CSS, har alletiders design med mere vægt på billedteksten end mange sliders. Som sådan er den nyttig for websteder, der skal bruge deres karruseller til at vise information såvel som billeder. </p> <p align="center"><img src="https://cssslider.com/sliders/demo-10/preview.jpg" style="border: 0px"></p> <p>Der er to navigationspile, en på hver side, der er synlige hele tiden, en billedtekst nederst i midten, der omfatter en titel og et tekst afsnit, og et sæt navigationscirkler forneden, der lader brugeren vælge, hvilket billede, de gerne vil se. </p> <p>Demoen har en interessant ‘skygge’ virkning ned langs venstre og højre side. Dette hjælper navigationselementerne, især pilene, til at stå i kontrast, og reducerer betydningen af billederne. Denne slider er fantastisk til tekst på baggrund af et interessant billede, og er ikke beregnet til websteder, der ønsker udelukkende at fokusere på billederne. </p> <p>Navigationspilene er halvgennemsigtige hvide pilespidser med en diskret skyggekastende virkning, der giver dem dybde. Når du dvæler på pilene, bliver skyggen på den pågældende side mørkere, og pilespidsen bliver mere uigennemsigtig og derfor lysere. Ved at klikke på pilene kører man gennem billederne i karrusellen. </p> <p>Billedteksten har hvid tekst, der bruger Helvetica Neue, måske en af de mest genkendelige og klassiske sans-serif fonter. Det er en tidløs font, der kan bruges i næsten enhver situation. </p> <p>Teksten har en anelse skyggevirkning, der hjælper den til at udskille sig fra baggrundsbilledet of giver billedteksten lidt dybde. Fordi teksten står direkte oven på billedet, er det vigtigt, at du sikrer dig, at der er høj kontrast mellem din tekstfarve og dine baggrundsbilleder, så billedteksten er let at læse. </p> <p>Navigationscirklerne er nederst i midten, og hver enkelt repræsenterer et billede/billedtekst i slideshow’et. De er gennemsigtige med en tynd hvid kant. En fremhævet cirkel er uigennemsigtigt hvis uden kant. Hvis du dvæler på en cirkel, frembringer det et forhåndsvisningsbillede med en hvid kant. </p> <p>Slider’en er opbygget omkring en bootstrap ramme, der gør den utroligt let at tilpasse efter dine behov. </p> <p>Fordi slider’en udelukkende er CSS, virker den i browsere, hvor JQuery og Javascript ikke er aktiveret. Det gør det også meget hurtigt at loade slider’en, da der ikke er nogen tunge javascript koder eller billeder at downloade. Som sådan er det alletiders slider design for mobil-først udviklere, der er på udkig efter en enkel, responsiv slider for det moderne internet. </p> <p>Siden dette eksempel er udviklet ved hjælp af HTML5 og CSS er det søgemaskinevenligt, hvilket er nyttigt for en slider med fokus på tekst. Alle billedteksterne i dit slideshow vil have SEO værdi. </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