Image 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>Image 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/image-slider-6.html" title="English"><i class="flag-en"></i> EN</a></li> <li><a class="item" href="https://cssslider.com/es/image-slider-6.html" title="Español"><i class="flag-es"></i> ES</a></li> <li><a class="item" href="https://cssslider.com/nl/image-slider-6.html" title="Nederlands"><i class="flag-nl"></i> NL</a></li> <li><a class="item" href="https://cssslider.com/ja/image-slider-6.html" title="日本語"><i class="flag-ja"></i> JA</a></li> <li><a class="item" href="https://cssslider.com/da/image-slider-6.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/image-slider-6.html" title="Deutsch"><i class="flag-de"></i> DE</a></li> <li><a class="item" href="https://cssslider.com/fr/image-slider-6.html" title="Français"><i class="flag-fr"></i> FR</a></li> <li><a class="item" href="https://cssslider.com/it/image-slider-6.html" title="Italiano"><i class="flag-it"></i> IT</a></li> <li><a class="item" href="https://cssslider.com/pt/image-slider-6.html" title="Português"><i class="flag-pt"></i> PT</a></li> <li><a class="item" href="https://cssslider.com/sv/image-slider-6.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-6/engine1/style.css">   <script type="text/javascript" src="https://cssslider.com/sliders/demo-6/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_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_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'> <input name="cs_anchor1" id='cs_pause1_3' type="radio" class='cs_anchor pause'> <ul> <div style="width: 100%; visibility: hidden; font-size: 0px; line-height: 0;"> <img src="https://cssslider.com/sliders/demo-6/data1/images/aster_tongolensis_michelmas_daisy_mauve_flower.jpg" style="width: 100%;"> </div> <li class='num0 img'> <img src="https://cssslider.com/sliders/demo-6/data1/images/aster_tongolensis_michelmas_daisy_mauve_flower.jpg" alt='Responsive ' title='Daisy Mauve Flower' /> </li> <li class='num1 img'> <img src="https://cssslider.com/sliders/demo-6/data1/images/flowers_plant_bloom_daisies_white.jpg" alt='CSS3 ' title='White daisies' /> </li> <li class='num2 img'> <img src="https://cssslider.com/sliders/demo-6/data1/images/flowers_plant_purple_pansy_violet.jpg" alt='Wordpress slideshow ' title='Pansy' /> </li> <li class='num3 img'> <img src="https://cssslider.com/sliders/demo-6/data1/images/rose_summer_flower_flowers_garden_rose.jpg" alt='CSS carousel ' title='White rose' /> </li> </ul> <a class="cs_lnk" href="https://cssslider.com"> HTML image carousel </a> <div class='cs_description'> <label class='num0'> <span class="cs_title"><span class="cs_wrapper">Daisy Mauve Flower</span></span> <br/><span class="cs_descr"><span class="cs_wrapper">Aster Tongolensis</span></span> </label> <label class='num1'> <span class="cs_title"><span class="cs_wrapper">White daisies</span></span> <br/><span class="cs_descr"><span class="cs_wrapper">field plant</span></span> </label> <label class='num2'> <span class="cs_title"><span class="cs_wrapper">Pansy</span></span> <br/><span class="cs_descr"><span class="cs_wrapper">purple flowers</span></span> </label> <label class='num3'> <span class="cs_title"><span class="cs_wrapper">White rose</span></span> <br/><span class="cs_descr"><span class="cs_wrapper">garden plant</span></span> </label> </div> <div class='cs_play_pause'> <label class='cs_play' for='cs_play1'><span><i></i></span></label> <label class='cs_pause num0' for='cs_pause1_0'><span><i></i></span></label> <label class='cs_pause num1' for='cs_pause1_1'><span><i></i></span></label> <label class='cs_pause num2' for='cs_pause1_2'><span><i></i></span></label> <label class='cs_pause num3' for='cs_pause1_3'><span><i></i></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> <label class='num3' for='cs_slide1_3'><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> <label class='num3' for='cs_slide1_3'><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-6/data1/tooltips/aster_tongolensis_michelmas_daisy_mauve_flower.jpg" alt='CSS3 slider ' title='Daisy Mauve Flower' /></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-6/data1/tooltips/flowers_plant_bloom_daisies_white.jpg" alt='CSS3 slider ' title='White daisies' /></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-6/data1/tooltips/flowers_plant_purple_pansy_violet.jpg" alt='CSS ' title='Pansy' /></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-6/data1/tooltips/rose_summer_flower_flowers_garden_rose.jpg" alt='CSS3 slider ' title='White rose' /></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/html-slideshow-9.html"> <img src="https://cssslider.com/sliders/demo-9/thumb.jpg" alt="HTML Slideshow wordpress carousel " class="sprocket-mosaic-image" /> <span class="sprocket-mosaic-link-text">HTML 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> <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 bootstrap slider " 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/responsive-slider-2.html"> <img src="https://cssslider.com/sliders/demo-2/thumb.jpg" alt="Responsive Slider jquery slider " class="sprocket-mosaic-image" /> <span class="sprocket-mosaic-link-text">Responsive 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/non-jquery-slider-1.html"> <img src="https://cssslider.com/sliders/demo-1/thumb.jpg" alt="non-jQuery Slider html " class="sprocket-mosaic-image" /> <span class="sprocket-mosaic-link-text">non-jQuery 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> </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"> Slide Effect & Blast Theme Image Slider</h2> <p>Denne slideren er en fullbredde CSS-basert slider som er dramatisk og vakker. Den er berøringsaktivert som gjør den ideell for netbrett og smarttelefoner, og den laster også veldig raskt. </p> <p align="center"><img src="https://cssslider.com/sliders/demo-6/preview.jpg" style="border: 0px"></p> <p>Fordi slideren har full bredde, får bildene maksimal visning, noe som gjør at denne slideren er et ideelt valg for fotografer og andre som ønsker å ha fokus på bilder på sine nettsted. </p> <p>Det er to navigasjonspiler og en pause/spill av-knapp som kommer til syne når brukeren peker på bildene. Disse bruker halvfete hvite ikoner på en dyp blå sirkelformet bakgrunn. De synes å ‘dryppe’ i posisjon, fader inn og synker ned. Det er en dramatisk og attraktiv effekt som som fungerer like godt i motsatt rekkefølge når ikonene synes å ‘heve seg’ ut av slideren. Det hele gir designet en tredimensjonal effekt. </p> <p>Når man peker på ikonene oppstår en blå ramme som synes å stråle ut fra den sentrale sirkelen og så fade ut. Dette er nok en stilig og dramatisk effekt som virkelig gjør at dette sliderdesignet utmerker seg. </p> <p>Ikonene gjør nøyaktig det du forventer: å klikke på neste/forrige-pilene tar deg til de relevante bildene, og å klikke på spill av/pause-knappen vil enten starte eller stoppe bildevisningen. </p> <p>Brukeren kan også navigere mellom bildene ved å benytte sirklene nederst på skjermen. Disse sirklene er dyp blå og hver av dem representerer et bilde i lysbildevisningen. Når et nytt bilde flytter til visningsfeltet, får den aktuelle sirkelen en halvt gjennomsiktig halvfet sirkel som trekker blikket mot den og hjelper brukeren til å forstå hvordan sirklene fungerer. </p> <p>Peking på sirklene forhåndsviser bilder i en blå ramme. Forhåndsvisnings-bilder drypper inn og flyr ut på samme måte som de andre ikonene gjør. Å klikke på en sirkel laster bildet inn i bildevisningen. </p> <p>Hvert bilde i bildevisningen ‘sklir’ over i det neste, enten til venstre eller høyre avhengig av om det er det neste eller det forrige bildet. Ved å bruke sirklene for å navigere til et bilde to eller tre bilder unna, eller når bildevisningen når ‘slutten’ på bildene og går tilbake til begynnelsen, kjører den raskt gjennom alle bildene. Dette gir en naturlig og ‘realistisk’ følelse som er ganske smart og som gjør at slideren virker vennlig og organisk. </p> <p>Det er en bildetekst i nederste venstre hjørne. Det er en tittel og en undertittel som begge er i hvit tekst på en halvt gjennomsiktig blå rektangelformet bakgrunn. Bildetekstene ‘drypper’ og ‘hever seg’ inn og ut på samme måte som de andre ikonene og forhåndsvisningsbildene. Den halvt gjennomsiktige blå bakgrunnen lar fargene i bildet under vises gjennom den, og gjør at bildeteksten virker litt mykere. </p> <p>Bildeteksten benytter ‘Duru Sans’, en sans-serif font som kombinerer et humanistisk og modernistisk design. Resultatet er svært elegant og gir designet et sofistikert utseende. </p> <p>Fordi verken Jquery, javascript eller bilder benyttes, er denne slideren rask og fungerer på alle plattformer. Den er perfekt for mobil-designere. </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

Image Slider