jQuery-fri slider, enbart CSS bild slider

<!DOCTYPE html> <html xml:lang="sv" lang="sv"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>jQuery-fri slider, enbart CSS bild slider</title> <meta name="description" content="Mottaglig slider med enbart CSS. Häftiga animationer och mallar. Visuell Skapare - inget 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/sv/demos.html"><i class="icon-th"></i> Aktuella Demos</a> </li> <li> <a class="item" href="https://cssslider.com/sv/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> Ladda Ner</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öp nu</a> </li> <li> <a class="item" href="#" title="Svenska"><i class="flag-sv"></i> SV <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/no/" 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/" 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/da/" title="Dansk"><i class="flag-da"></i> DA</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-sv.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>Skapa vackra bild sliders endast i CSS. Inget jQuery, inget JavaScript, inga bild ikoner, ingen kodning! Det är otroligt snabbt, lätt, mottagligt och retina-redo. Fungerar på alla moderna enheter och webbläsare. KenBurns, slide, avta, Zoomeffekter och några platta skal är tillgänliga ( Mer kommer snart). Ladda ner en gratis slider generator för Windows och Mac nu! </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> Ladda ner för Win</a> <a href="../cssslider-mac-setup.zip" class="readon rt-large-button download-button"><span class="icon-apple"></span> Ladda ner för 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>Aktuella Demos</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/sv/bootstrap-slider-10.html"> <img src="https://cssslider.com/sliders/demo-10/thumb.jpg" alt="Bootstrap Slider responsive " 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="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/sv/html-slideshow-9.html"> <img src="https://cssslider.com/sliders/demo-9/thumb.jpg" alt="HTML Slideshow html5 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="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/sv/bootstrap-carousel-8.html"> <img src="https://cssslider.com/sliders/demo-8/thumb.jpg" alt="Bootstrap Carousel html5 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/sv/non-jquery-carousel-7.html"> <img src="https://cssslider.com/sliders/demo-7/thumb.jpg" alt="non-jQuery Carousel css3 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="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="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">Enbart CSS Slider</h1> <p>Glöm bort att använda JavaScript - Den här bild slidern är skapad med CSS och HTML endast</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">Cross-browser</h1> <p>Fungerar på alla enheter och moderna webbläsare, inklusive gammla IEs ( med det valfria js reservståndspunkten)</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>Silkeslena hårdvaruaccelererade animationer presterar mycket bättre än jQuerys, speciellt på mobiler</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-redo</h1> <p>Alla slider kontroller är vektor ikoner typsnitt och de är perfekta på högupplösta displayer </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">Icke-jQuery Slider</h1> <p>Inget mer tungt och segt jQuery innehållande massor av oanvänd kod</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">Varenda färg </h1> <p>CSS Slider använder inte bilder för styling så skalfärgen kan enkelt ändras </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">Mottaglig slider</h1> <p>Mottaglig slider passar in perfekt på din sida, oavsett skärmstorleken </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 kodning</h1> <p>Skapa din slider på sekunder med den visuella skaparen </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>jQuery-fri 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>Numera, verkar det som att människor har blivit kära i bild sliders. De finns överallt. Och visst, du kan finna mängder av bild sliders som låter dig visa olika bilder på din hemsida, men de är alla ganska enkla, med samma krav av jQuery och JavaScript. Varför använda sig av de tunga och överladdade biblioteken när allt kan göras med de tydliga och lätta CSS? cssSlider är den enda enbart CSS slidern som erbjuder en kombination av häftiga CSS3 effekter, färdiggjorda skal, ikontypsnitt, fullt funktionella navigation kontroller och en kodfri slider skapare. </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>Imponerande övergångar</span></h2> <p>cssSlider framför otrolig enbart CSS3, hårdvaruaccelerande övergångar för att imponera dina användare och hjälpa till att hålla deras fokus på din hemsida. </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>Vackra Slider Teman</span></h2> <p>Du får inte bara ett utseende med cssSlider. Den här otroliga slidern kommer med ett inbyggt tema/färg/effektväljare som låter dig välja och vraka från den häftiga samlingen av förbyggda teman som är inkluderade! </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>Enbart CSS</span></h2> <p>cssSlider är enbart CSS baserat (inte Flash, inte jQuery, inte Javascript), så det kan köras i alla webbläsare, utan att behöva några extra 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>Mobil</span></h2> <p>Dina användare besöker inte bara din hemsida från bekvämligheten av en dator. Med en mottaglig design, kommer cssSlidern se bra ut på alla enheter utan någon ansträngning, direkt efter installation. </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>Direkt förhandsgranskning</span></h2> <p>Förhandsgranska din slider och dina ändringar direkt i förhandsgranskningsområdet. </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-redo</span></h2> <p>Sliderns föregående/nästa pilarna och andra kontroller är vektor ikoner typsnitt, vilket gör dem oberoende av en upplösning och perfekta för retina skärmar. </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>Enkelt att använda</span></h2> <p>Enkelt att använda, du tilldelar bara diverse skal, färger och effekter från biblioteket till din slider. Du behöver absolut inte ha någon kunskap om programmering. Du kommer inte behöva skriva en enda lina av kod! </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>Mottaglig Design</span></h2> <p>Med fler och fler användare som surfar på din hemsida från sina mobiler, så är det kritiskt att din hemsida ser ut och fungerar korrekt på smartmobiler och surfplattor. cssSlider justeras automatiskt i storlek på stationära och mobila enheter beroende på webbläsarens fönsterstorlek. </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>Högt förändringsbart</span></h2> <p>Kör cssSlider i två olika konfigureringslägen: Grundläggande och Avancerade. Välj från ett antal av inbyggda layoutstilar för att hålla saker riktigt enkelt, eller dyk in och redigera konfigureringen hur du vill för att få 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 bildbeskärning och formning</span></h2> <p>Du kommer inte behöva fem olika bildbehandlingsprogram för att få dina bilder redo för din slider. cssSlider gör all bildbeskärning och formning åt dig automatiskt!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>Färgkombinationer</span></h2> <p>Osäker på vilken färg att använda med din slider? Inga problem, varje cssSlider skal kommer med 6 redo-att-använda färgsystem för att göra ditt val enklare. </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>Drag and Drop Dra och Släpp</span></h2> <p> Med den imponerande dra och släpp funktionen kan du enkelt lägga till eller ta bort slides från din slider eller byta deras ordning. Det går inte att göra det enklare än så här! </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 vänligt</span></h2> <p>Eftersom slidern är skapad med enkel HTML5, trots att den ser supercool ut, kan sökmotorer fortfarande hantera det effektivt. Det betyder att du kan göra dina användare och sökmotorerna som Google nöjda, allt på en och samma gång! </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>Skräddarsy din Slider</span></h2> <p>Det finns mängder av inställningar som du kan anpassa, inklusive vackra övergångseffekter och färgglada skal, föregående/nästa navigation, Punkter med miniatyrer, automatisk uppspelning, paus/stopp, full width och andra valmöjligheter. </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>Lätt och kompatibel</span></h2> <p>Använder inte JavaScript för att försäkra att dina sida laddar snabbt, utan att vänta på att slidern ska ladda. Det är också designat för att vara så kompatibelt som möjligt genom att använda de senaste standarderna. </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 nerladdning för Windows och 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

jQuery-fri slider, enbart CSS bild slider