ikke en jQuery Slider, pur CSS bilde 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>ikke en jQuery Slider, pur CSS bilde slider</title> <meta name="description" content="Responsiv Slider med Pur CSS. Fantastiske animasjoner og templates. Visuell Behandler – Ingen scripting!" /> <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/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/" 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/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/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/fr/" title="Français"><i class="flag-fr"></i> FR</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/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-no.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>Skap vakre bilde slidere fullstendig i CSS. Ikke noe jQuery, ikke noe JavaScript, ingen bilde ikoner, ingen koding! Den er utrolig rask, lett, responsive, og retina-klar. Virker på alle moderne enheter og nettlesere. KenBurns, Slide, Fade, Zoom effekter og noen flate skinns er tilgjengelige (flere kommer snart). Last ned en gratis slider generator for Windows og Mac nå! </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> Nedlastning for Win</a> <a href="../cssslider-mac-setup.zip" class="readon rt-large-button download-button"><span class="icon-apple"></span> Nedlastning for 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>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-slider-10.html"> <img src="https://cssslider.com/sliders/demo-10/thumb.jpg" alt="Bootstrap Slider css slider " class="sprocket-mosaic-image" /> <span class="sprocket-mosaic-link-text">Bootstrap 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/html-slideshow-9.html"> <img src="https://cssslider.com/sliders/demo-9/thumb.jpg" alt="HTML Slideshow bootstrap 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 wordpress 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/non-jquery-carousel-7.html"> <img src="https://cssslider.com/sliders/demo-7/thumb.jpg" alt="non-jQuery Carousel css3 " 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="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="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">Pur CSS Slider</h1> <p>Glem å bruke hvilke som helst JavaScript – denne bilde slideren er laget med kun CSS og HTML</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">Nettleservennlig</h1> <p>Virker på alle enheter og moderne nettlesere, inkluder gamle IE (med det valgfrie js tilbakefallet)</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">CSS3 effekter</h1> <p>Silkeglatt hardware-akselererte animasjoner som utføres mye bedre enn på jQuery versjoner, spesielt på mobiltelefoner </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">Retina-klar</h1> <p>Alle slider kontrollene er vektor ikon fonter og de er perfekte på høyoppløste skjermer</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">Ikke-jQuery Slider</h1> <p>Aldri mere tunge og trege jQuery som inneholder tonnevis av ubrukt kode</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">Alle farger</h1> <p>CSS Slider benytter ikke bilder for stiler, så skinn fargen kan enkelt endres </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">Responsive slider</h1> <p>Responsive slider passer perfekt på din nettside, uavhengig av skjermstørrelsen </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">Ingen koding</h1> <p>Lag din egen slider på sekunder med den visuelle generatoren</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>ikke en jQuery Slider?</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>I disse dager, virker det som om folk har blitt forelsket i bilde slidere. De er overalt. Og du kan selvsagt finne massevis av bilde slidere som lar deg vise ulike fotografier og bilder på nettstedet ditt, men de er alle litt for ensporede, med det samme kravet til jQuery og Javascript. Hvorfor benytte de tunge og overbelastede bibliotekene når alt kan gjøres med den klare og lette CSS-en? cssSlider er den eneste rene CSS slideren som tilbyr en kombinasjon av fantastiske CSS3 effekter, forhåndslagde skinns, ikon fonter, fullt funksjonelle navigeringskontroller og slider generering uten koding. </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>Imponerende Overganger </span></h2> <p>cssSlider har utrolig ren CSS3, maskinvare-akselererte overganger for å imponere dine besøkende og bidra til å holde oppmerksomheten rettet mot nettstedet ditt.</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>Vakre Slider Maler</span></h2> <p>Du får ikke bare ett utseende med cssSlider. Denne fantastiske slideren kommer med en innebygd mal/farge/effekt velger som lar deg velge fra den fantastiske samlingen av forhåndslagde maler som er inkludert!</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>Pur CSS </span></h2> <p>cssSlider er helt CSS basert (ikke Flash, ikke jQuery, ikke Javascript), så det vil kjøre i alle nettlesere, uten at du trenger noen ekstra plugins. </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>Mobiltelefon</span></h2> <p>Dine besøkende kommer ikke bare fra ordinære datamaskiner. Med et responsive design, vil cssSlider se super ut på alle enheter uten noe problem, rett ut av boksen.</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>Live Forhåndsvisning</span></h2> <p>Instant forhåndsvisning av din slider og hvilken som helst endring du gjør i området for forhåndsvisning. </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>Retina-klar</span></h2> <p>Sliderens forrige/neste piler og andre kontroller er vektor ikon fonter, noe som gjør de uavhengig av oppløsning og ideelle for retina skjermer. </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>Enkel å bruke </span></h2> <p>Enkel å bruke, du bare velger forskjellige skinns, farger og effekter fra biblioteket til slideren. Det er absolutt ikke nødvendig med noen forkunnskaper i programmering i det hele tatt. Du trenger ikke å skrive en eneste linje med kode! </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>Med flere og flere besøkende som surfer på nettstedet ditt med sine mobile enheter, er det viktig at nettstedet ditt ser ut og fungerer riktig på smarttelefoner og nettbrett. cssSlider justerer automatisk størrelse responsivt på stasjonære og mobile enheter basert på nettleserens vindusstørrelsen. </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>Meget Tilpasningsvennlig</span></h2> <p>Kjør cssSlider i to forskjellige konfigurasjonsmodus: Basic og Advanced. Velg mellom en rekke innebygde layouter for å holde ting virkelig enkelt, eller gå inn og editer oppsettet slik du ønsker det for full kontroll.</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>Automatisk Bilde Kutting og Størrelser</span></h2> <p>Du behøver ikke fem forskjellige fotoediteringsprogrammer for å få bildeslideren din ferdig. cssSlider gjør all endring av bildestørrelse og kutting for deg automatisk!</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>Farge Kombinasjoner</span></h2> <p>Er du ikke sikker på hvilken farge du skal benytte på slideren din? Ingen bekymringer, hver cssSlider skinn kommer med 6 fargesystemer klare for å gjøre dine valg enklere.</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>Dra og Slipp</span></h2> <p> Med den imponerende dra og slip muligheten, kan du raskt legge til eller fjerne slides fra din slider, eller bytte rekkefølgen. Du kan virkelig ikke lage den noe lettere enn dette! </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 Vennlig</span></h2> <p>Siden slideren er bygget med ren HTML5, selv om den ser superkule ut, kan søkemotorene fortsatt crawle den effektivt. Det betyr at du kan glede dine besøkende og søkemotorer som Google, alle på en gang!</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>Tilpass Din Slider</span></h2> <p>Det er tonnevis av innstillinger som du kan tweake, inkludert vakre overgangseffekter og fargerike flate skinns, forrige/neste navigasjon, punktmerker med thumbnails, autoplay, pause/stopp, full vidde og andre valg.</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>Lettvekts og kompatibel</span></h2> <p>Benytter ikke JavaScript for å sikre at nettsiden din laster raskt, uten å matte vente på at slideren skal laste. Den er også designet for å være så kompatibel som mulig ved å benytte de siste standardiseringene.</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> Gratis nedlastning for Windows og 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

ikke en jQuery Slider, pur CSS bilde slider