Image Slider

<!DOCTYPE html> <html xml:lang="nl" lang="nl"> <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/nl/demos.html"><i class="icon-th"></i> Live Demo’s</a> </li> <li> <a class="item" href="https://cssslider.com/nl/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> Download</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> Koop Nu</a> </li> <li> <a class="item" href="#" title="Nederlands"><i class="flag-nl"></i> NL <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/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 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/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> <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='jQuery slider ' 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='HTML 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='jQuery 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='jQuery ' title='White rose' /> </li> </ul> <a class="cs_lnk" href="https://cssslider.com"> Bootstrap 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='HTML slideshow ' 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='Responsive 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 carousel ' 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='HTML carousel ' 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 Demo’s</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/nl/javascript-slider-18.html"> <img src="https://cssslider.com/sliders/demo-18/thumb.jpg" alt="non-Javascript Slider css3 slideshow " class="sprocket-mosaic-image" /> <span class="sprocket-mosaic-link-text">non-Javascript Slider</span> <span class="sprocket-mosaic-hover"></span> <span class="sprocket-mosaic-hovercontent" data-content="Bekijk 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/nl/wordpress-slider-15.html"> <img src="https://cssslider.com/sliders/demo-15/thumb.jpg" alt="Wordpress Slider css3 slideshow " class="sprocket-mosaic-image" /> <span class="sprocket-mosaic-link-text">Wordpress Slider</span> <span class="sprocket-mosaic-hover"></span> <span class="sprocket-mosaic-hovercontent" data-content="Bekijk 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/nl/full-width-slider-14.html"> <img src="https://cssslider.com/sliders/demo-14/thumb.jpg" alt="Full Width Slider wordpress slider " class="sprocket-mosaic-image" /> <span class="sprocket-mosaic-link-text">Full Width Slider</span> <span class="sprocket-mosaic-hover"></span> <span class="sprocket-mosaic-hovercontent" data-content="Bekijk 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/nl/non-jquery-gallery-13.html"> <img src="https://cssslider.com/sliders/demo-13/thumb.jpg" alt="non jQuery Gallery html5 slideshow " class="sprocket-mosaic-image" /> <span class="sprocket-mosaic-link-text">non jQuery Gallery</span> <span class="sprocket-mosaic-hover"></span> <span class="sprocket-mosaic-hovercontent" data-content="Bekijk 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> Download voor Win</a> <a href="https://cssslider.com/cssslider-mac-setup.zip" class="readon rt-large-button download-button"><span class="icon-apple"></span> Download voor 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 Animation & Blast Template Image Slider</h2> <p>Deze slider bestrijkt de volle breedte, is een pure CSS slider en is dramatisch en mooi. Touch-swipe is mogelijk, wat hem ideaal maakt voor tablets en smartphones en hij laadt ook erg snel. </p> <p align="center"><img src="https://cssslider.com/sliders/demo-6/preview.jpg" style="border: 0px"></p> <p>Omdat de slider over de volledige breedte weergegeven wordt, maken de afbeeldingen een maximale indruk, waardoor deze slider een geweldige keuze is voor fotografen en anderen die willen dat de focus van hun site ligt op de afbeeldingen. </p> <p>Er zijn twee navigatiepijlen en een pause/play-knop die verschijnen wanneer de gebruiker over de slides gaat. Deze gebruiken forse witte symbolen tegen een diepblauwe ronde achtergrond. Ze lijken op hun plaats te ‘vallen’, door in te faden en weer te krimpen. Het is een dramatisch en aantrekkelijk effect, dat omgekeerd evengoed werkt, wanneer de iconen uit de slider lijken te rijzen. Dit alles geeft het design een driedimensionaal gevoel. </p> <p>Wanneer u over de iconen gaat, verschijnt er een blauwe rand die uit de centrale cirkel lijkt te stralen en dan weer verdwijnt. Opnieuw een modieus en dramatisch effect dat het sliderdesign echt laat opvallen. </p> <p>De iconen doen precies wat u zou verwachten: door op de volgende/vorige-pijl te drukken wordt u naar de desbetreffende slides gebracht, en op de pause/play-butten drukken laat de slideshow stoppen of juist verdergaan. </p> <p>De gebruiker kan ook navigeren tussen de slides door de cirkels onderaan het scherm te gebruiken. Deze cirkels zijn diepblauw en representeren ieder een afbeelding in de slideshow. Wanneer een nieuwe afbeelding op het scherm verschijnt, krijgt de relevante cirkel een brede, semitransparante witte rand die de aandacht trekt en de gebruiker helpt te gebruiken hoe de cirkels werken. </p> <p>Interactie met de cirkels geeft een previewafbeelding in een blauw kader. Dit valt het scherm binnen en verdwijnt op dezelfde manieren als de andere iconen doen. Door op een cirkel te klikken, laadt u die afbeelding in de slideshow. </p> <p>Iedere afbeelding in de slideshow ‘glijdt’ naar de volgende, naar links of naar rechts afhankelijk van of het om de volgende of om de vorige slide gaat. Wanneer de cirkels gebruikt worden om te navigeren, of wanneer de slideshow zijn einde bereikt en naar het begin teruggaat, doorloopt hij snel alle slides. Dit geeft een natuurlijke, realistische uitstraling die vrij subtiel is, maar de slider toch prettig en organisch maakt. </p> <p>Een bijschrift staat in de hoek linksonder. Er zijn een titel en een subtitel, beide in witte tekst op een semitransparante blauwe rechthoek. De bijschriften ‘vallen’ en ‘stijgen’ het scherm in en uit op dezelfde manier als de andere iconen en de previewafbeeldingen. De semitransparante blauwe achtergrond laat de kleuren van de onderliggende foto doorschijnen, en geeft het bijschrift een net iets zachtere uitstraling. </p> <p>De bijschriften gebruiken Duru Sans, een schreefloos lettertype da teen humanistisch en modernistisch design combineert. Het resultaat is erg elegant en geeft het ontwerp een verfijnde feel. </p> <p>Omdat er geen JQuery, geen javascript en geen plaatjes zijn, is deze slider snel en werkt hij op ieder platform. Het zal ideaal zijn voor mobile-first designers. </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