Image 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>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/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/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/no/image-slider-6.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/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/da/image-slider-6.html" 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"> <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 slideshow ' 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='Responsive slideshow ' 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='Bootstrap slider ' 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='CSS3 ' title='White rose' /> </li> </ul> <a class="cs_lnk" href="https://cssslider.com"> Wordpress slider </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='Bootstrap 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='Bootstrap ' 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='CSS3 slideshow ' 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>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/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/image-gallery-5.html"> <img src="https://cssslider.com/sliders/demo-5/thumb.jpg" alt="Image Gallery jquery " 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/sv/non-jquery-slideshow-3.html"> <img src="https://cssslider.com/sliders/demo-3/thumb.jpg" alt="non-jQuery Slideshow html5 " 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> Ladda ner för Win</a> <a href="https://cssslider.com/cssslider-mac-setup.zip" class="readon rt-large-button download-button"><span class="icon-apple"></span> Ladda ner för 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 Transition & Blast Style Image Slider</h2> <p>Det här bildspelet i full bredd, som endast är till CSS, är dramatisk och vacker. Den har aktiverade svepgester, vilket gör den idealisk för surfplattor och smarttelefoner, och den laddar också väldigt snabbt. </p> <p align="center"><img src="https://cssslider.com/sliders/demo-6/preview.jpg" style="border: 0px"></p> <p>Eftersom bildspelet har full bredd får bilderna maximal styrka, vilket gör det här bildspelet till ett bra val för fotografer och andra som vill att deras hemsidas fokus ska ligga på bilderna. </p> <p>Det finns två navigationspilar och en paus/start-knapp som dyker upp när användaren interagerar med eller ”svävar” över reglagen. Dessa använder feta vita ikoner mot en mörkblå cirkulär bakgrund. De verkar ”falla” in i position, blekna bort och krympa. Det är en dramatisk och attraktiv effekt som fungerar lika bra tvärtom, när ikonerna ”stiger” av bildspelet. Hela grejen ger designen en tredimensionell känsla. </p> <p>Att sväva över ikonerna skapar en blå kant som verkar stråla ut från mittcirkeln och sedan blekna bort. Återigen är det en stilren och dramatisk effekt som verkligen gör att det här bildspelets design utmärker sig. </p> <p>Ikonerna gör precis vad du kan vänta dig: att klicka på nästa/föregående-pilarna tar dig till de relevanta bildspelen, och att klicka på starta/paus-knappen kommer antingen stanna bildspelet eller starta det. </p> <p>Användaren kan även navigera mellan bildspel genom att använda cirklarna längst ner i mitten på skärmen. Dessa cirklar är mörkblå, och varje cirkel representerar en bild i bildspelet. När en ny bild flyttas in i visningsskärmen får den relevanta cirkeln en halvtransparent fet vit kant som drar till sig blicken och hjälper användaren förstå hur cirkeln fungerar. </p> <p>Att interagera med cirklarna visar en förhandsvisning av en bild i en blå ram. Denna förhandsvisning faller in och flyger ut samma håll som de andra ikonerna gör. Att klicka på en cirkel laddar sedan den bilden till bildspelet. </p> <p>Varje bild i bildspelet ”glider” till nästa bild, antingen åt vänster eller höger beroende på om det är nästa eller föregående bild. När man använder cirklarna för att navigera till en bild som är två eller tre bilder bort, eller när bildspelet når slutet av bilderna och går tillbaka till början, går den snabbt igenom alla bilderna. Detta ger den en naturlig, realistisk känsla som är ganska subtil, men gör att bildspelet känns vänligt och naturligt. </p> <p>En bildtext finns i vänstra hörnet längst ned. Det finns titel och undertitel, båda är av vit text på en halvtransparent blå rektangel. Bildtexterna ”faller” och ”reser” sig in i och upp från sina platser på samma sätt som de andra ikonerna och förhandsvisningsbilderna. Den halvtransparenta blå bakgrunden tillåter den undre bildens färger att lysa igenom, och ger bildtexten en något mjukare känsla. </p> <p>Dessa bildtexter använder Duru Sans, ett sans-serif typsnitt som blandar en humanistisk och modernistisk design. Resultatet är väldigt elegant och ger designen en sofistikerad känsla. </p> <p>Eftersom det inte finns något JQuery, inget javascript och inga bilder är det här bildspelet snabbt och fungerar på alla plattformer. Det kommer vara perfekt för designers som främst använder mobilen. </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