non-jQuery Slider

<!DOCTYPE html> <html xml:lang="no" lang="no"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>non-jQuery 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/no/demos.html"><i class="icon-th"></i> Live Demoer</a> </li> <li> <a class="item" href="https://cssslider.com/no/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> Nedlastning</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> Kjøp nå</a> </li> <li> <a class="item" href="#" title="Norsk"><i class="flag-no"></i> NO <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/non-jquery-slider-1.html" title="English"><i class="flag-en"></i> EN</a></li> <li><a class="item" href="https://cssslider.com/es/non-jquery-slider-1.html" title="Español"><i class="flag-es"></i> ES</a></li> <li><a class="item" href="https://cssslider.com/nl/non-jquery-slider-1.html" title="Nederlands"><i class="flag-nl"></i> NL</a></li> <li><a class="item" href="https://cssslider.com/ja/non-jquery-slider-1.html" title="日本語"><i class="flag-ja"></i> JA</a></li> <li><a class="item" href="https://cssslider.com/da/non-jquery-slider-1.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/non-jquery-slider-1.html" title="Deutsch"><i class="flag-de"></i> DE</a></li> <li><a class="item" href="https://cssslider.com/fr/non-jquery-slider-1.html" title="Français"><i class="flag-fr"></i> FR</a></li> <li><a class="item" href="https://cssslider.com/it/non-jquery-slider-1.html" title="Italiano"><i class="flag-it"></i> IT</a></li> <li><a class="item" href="https://cssslider.com/pt/non-jquery-slider-1.html" title="Português"><i class="flag-pt"></i> PT</a></li> <li><a class="item" href="https://cssslider.com/sv/non-jquery-slider-1.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-1/engine1/style.css">   <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_slide1_3" 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" type="radio" class="cs_anchor" > <ul> <div style="width: 100%; visibility: hidden; font-size: 0px; line-height: 0;"> <img src="https://cssslider.com/sliders/demo-1/data1/images/canal.jpg" style="width: 100%;"> </div> <li class="num0 img"> <img src="https://cssslider.com/sliders/demo-1/data1/images/canal.jpg" alt="Canal" title="Canal" /> </li> <li class="num1 img"> <img src="https://cssslider.com/sliders/demo-1/data1/images/cannaregio.jpg" alt="Cannaregio district" title="Cannaregio district" /> </li> <li class="num2 img"> <img src="https://cssslider.com/sliders/demo-1/data1/images/dorsoduro.jpg" alt="Dorsoduro" title="Dorsoduro" /> </li> <li class="num3 img"> <img src="https://cssslider.com/sliders/demo-1/data1/images/houses.jpg" alt="Bright houses" title="Bright houses" /> </li> </ul> <div class="cs_description"> <label class="num0"> <span class="cs_title"><span class="cs_wrapper">Canal</span></span> <br/><span class="cs_descr"><span class="cs_wrapper">Venice, Italy</span></span> </label> <label class="num1"> <span class="cs_title"><span class="cs_wrapper">Cannaregio district</span></span> <br/><span class="cs_descr"><span class="cs_wrapper">The northernmost of the six historic sestieri (districts) of Venice</span></span> </label> <label class="num2"> <span class="cs_title"><span class="cs_wrapper">Dorsoduro</span></span> <br/><span class="cs_descr"><span class="cs_wrapper">Dorsoduro is one of the six sestieri of Venice, northern Italy.</span></span> </label> <label class="num3"> <span class="cs_title"><span class="cs_wrapper">Bright houses</span></span> <br/><span class="cs_descr"><span class="cs_wrapper">Venice, Italy</span></span> </label> </div> <div class="cs_arrowprev"> <label class="num0" for="cs_slide1_0"></label> <label class="num1" for="cs_slide1_1"></label> <label class="num2" for="cs_slide1_2"></label> <label class="num3" for="cs_slide1_3"></label> </div> <div class="cs_arrownext"> <label class="num0" for="cs_slide1_0"></label> <label class="num1" for="cs_slide1_1"></label> <label class="num2" for="cs_slide1_2"></label> <label class="num3" for="cs_slide1_3"></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-1/data1/tooltips/canal.jpg" alt="Canal" title="Canal" /></span> </label> <label class="num1" for="cs_slide1_1"> <span class="cs_point"></span> <span class="cs_thumb"><img src="https://cssslider.com/sliders/demo-1/data1/tooltips/cannaregio.jpg" alt="Cannaregio district" title="Cannaregio district" /></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-1/data1/tooltips/dorsoduro.jpg" alt="Dorsoduro" title="Dorsoduro" /></span> </label> <label class="num3" for="cs_slide1_3"> <span class="cs_point"></span> <span class="cs_thumb"><img src="https://cssslider.com/sliders/demo-1/data1/tooltips/houses.jpg" alt="Bright houses" title="Bright houses" /></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/no/bootstrap-carousel-8.html"> <img src="https://cssslider.com/sliders/demo-8/thumb.jpg" alt="Bootstrap Carousel css3 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="Vis 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/no/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="Vis 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/no/image-gallery-5.html"> <img src="https://cssslider.com/sliders/demo-5/thumb.jpg" alt="Image Gallery jquery 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="Vis 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/no/non-jquery-slideshow-3.html"> <img src="https://cssslider.com/sliders/demo-3/thumb.jpg" alt="non-jQuery Slideshow css3 slider " 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="Vis 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> Nedlastning for Win</a> <a href="https://cssslider.com/cssslider-mac-setup.zip" class="readon rt-large-button download-button"><span class="icon-apple"></span> Nedlastning for 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"> KenBurns Animation & Basic Style Non Jquery Slider</h2> <p>Denne huden har en enkel og minimalistisk følelse som er rent og innbydende. Utformingen bruker kun CSS, ingen JQuery eller Javascript, som gjør det utrolig rask å laste, helt forståelsesfull og kan brukes på en rekke plattformer, selv de med javascript deaktivert. </p> <p align="center"><img src="https://cssslider.com/sliders/demo-1/preview.jpg" style="border: 0px"></p> <p>Den bruker to nyanser av blek blå og mørk grå, som stopper den fra følelsen for sterk og enkel. </p> <p>Det er ingen ramme rundt slider, som betyr bilder ta sentrum. To navigasjonsutstyr pilene vises når du holder musepekeren over bildet. De synes slippe til sted ovenfra, med en jevn uttoning. Det er en langsom og jevn overgangseffekt. Pilen er en mørk grå, tynn pil-hode. Den sitter på en blek blå sirkel. Svever over pilen blir sirkelen hvit, og pilspissen Skift venstre og høyre. Bevegelsen tiltrekker øyet, og oppfordrer brukeren til å klikke på den. </p> <p>Klikk en av pilene sykluser brukeren gjennom bildene. </p> <p>I nedre venstre hjørne er en bildetekst, består av to titler. Begge har grå tekst på en blå firkant med avrundede hjørner. Tittelen rektanglet er en litt mørkere blåfargen undertittel rektanglet er en grå-ish, lys blå. </p> <p>Tittelen spretter i ovenfra, og kommer til en stopp overlappende undertittel rektanglet. Sub-tittelen spretter i nedenfor. Teksten i transittstopp enda mer, å skape en realistisk følelse at rektanglene har kommet til å stoppe og innsiden teksten har blitt rystet svar. Det er en svært attraktive og iøynefallende overgang, som fortsatt opprettholder den enkle og rene design stilen av malen. </p> <p>Skriften som brukes er Open Sans Condensed, en humanistisk sans-serif skrift som er nøytrale, enkel og ennå. </p> <p>Nederst på hvert lysbilde er en rekke blå sirkler. Hver viser et bilde i lysbildeserien. Sirkelen som representerer bildet på skjermen i lysbildeserien har en grå prikken i midten. </p> <p>Svever over en sirkel fører til en forhåndsvisningsbildet skal vises i en blå ramme og en blå pil nederst peker til riktig sirkelen. Dette forhåndsvisningsbildet lysbilder på plass ovenfra, på samme måte som navigasjonsutstyr pilene. </p> <p>Klikke på en sirkel laster inn relevante bildet i glidebryteren. Dette er en greta måte å tillate noen å navigere til bildet mest relevant. </p> <p>Endre effekten på denne demoen er 'kenburns', en moderne, enkle overgang hvor hvert bilde sakte zoomer og fades inn neste. Det er en endring effekt som skaper en følelse av konstant, avslappet bevegelse, som du ser verden slip av. Det fungerer effektivt med enkelt men moderne skyvedesign. </p> <p>Dette designet er fleksibel nok til å brukes for nesten hvilken som helst nettside som ønsker en moderne, rene design. Det er svært profesjonell, og ville være perfekt for teknologi nettsteder, programvareselskapene og så videre. </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

non-jQuery Slider