Live Demo’s

<!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>Live Demo’s</title> <meta name="description" content="Responsive Slider with Pure CSS. Awesome animations and templates. Visual Maker - No scripting!" /> <link rel="stylesheet" href="https://cssslider.com/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"> <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/" 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/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 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/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> <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-main-surround"><div id="rt-transition"> <div id="rt-mainbody-surround">  <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/jquery-content-slider-31.html"> <img src="https://cssslider.com/sliders/demo-31/thumb.jpg" alt="no-jQuery Content Slider css3 slider " class="sprocket-mosaic-image" /> <span class="sprocket-mosaic-link-text">no-jQuery Content 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/image-slider-jquery-30.html"> <img src="https://cssslider.com/sliders/demo-30/thumb.jpg" alt="Image Slider w/o jQuery css3 carousel " class="sprocket-mosaic-image" /> <span class="sprocket-mosaic-link-text">Image Slider w/o jQuery</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/slideshow-jquery-29.html"> <img src="https://cssslider.com/sliders/demo-29/thumb.jpg" alt="Slideshow w/o jQuery html slideshow " class="sprocket-mosaic-image" /> <span class="sprocket-mosaic-link-text">Slideshow w/o jQuery</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/carousel-jquery-28.html"> <img src="https://cssslider.com/sliders/demo-28/thumb.jpg" alt="Carousel w/o jQuery css carousel " class="sprocket-mosaic-image" /> <span class="sprocket-mosaic-link-text">Carousel w/o jQuery</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/jquery-image-gallery-27.html"> <img src="https://cssslider.com/sliders/demo-27/thumb.jpg" alt="non jQuery Image Gallery css slider " class="sprocket-mosaic-image" /> <span class="sprocket-mosaic-link-text">non jQuery Image 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> <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/jquery-photo-gallery-26.html"> <img src="https://cssslider.com/sliders/demo-26/thumb.jpg" alt="non jQuery Photo Gallery css carousel " class="sprocket-mosaic-image" /> <span class="sprocket-mosaic-link-text">non jQuery Photo 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> <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/slider-no-js-25.html"> <img src="https://cssslider.com/sliders/demo-25/thumb.jpg" alt="Slider w/o JS bootstrap slideshow " class="sprocket-mosaic-image" /> <span class="sprocket-mosaic-link-text">Slider w/o JS</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/css-slideshow-24.html"> <img src="https://cssslider.com/sliders/demo-24/thumb.jpg" alt="CSS Slideshow html slideshow " class="sprocket-mosaic-image" /> <span class="sprocket-mosaic-link-text">CSS Slideshow</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/content-slider-23.html"> <img src="https://cssslider.com/sliders/demo-23/thumb.jpg" alt="Content Slider css3 slideshow " class="sprocket-mosaic-image" /> <span class="sprocket-mosaic-link-text">Content 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/slider-html-22.html"> <img src="https://cssslider.com/sliders/demo-22/thumb.jpg" alt="Slider HTML wordpress carousel " class="sprocket-mosaic-image" /> <span class="sprocket-mosaic-link-text">Slider HTML</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-plugin-21.html"> <img src="https://cssslider.com/sliders/demo-21/thumb.jpg" alt="Wordpress Slider Plugin html carousel " class="sprocket-mosaic-image" /> <span class="sprocket-mosaic-link-text">Wordpress Slider Plugin</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/html5-slider-20.html"> <img src="https://cssslider.com/sliders/demo-20/thumb.jpg" alt="HTML5 Slider jquery slider " class="sprocket-mosaic-image" /> <span class="sprocket-mosaic-link-text">HTML5 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/javascript-slideshow-19.html"> <img src="https://cssslider.com/sliders/demo-19/thumb.jpg" alt="non-Javascript Slideshow css3 carousel " class="sprocket-mosaic-image" /> <span class="sprocket-mosaic-link-text">non-Javascript Slideshow</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/javascript-slider-18.html"> <img src="https://cssslider.com/sliders/demo-18/thumb.jpg" alt="non-Javascript Slider wordpress 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/carousel-slider-17.html"> <img src="https://cssslider.com/sliders/demo-17/thumb.jpg" alt="Carousel Slider jquery " class="sprocket-mosaic-image" /> <span class="sprocket-mosaic-link-text">Carousel 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/slideshow-html-16.html"> <img src="https://cssslider.com/sliders/demo-16/thumb.jpg" alt="Slideshow HTML bootstrap " class="sprocket-mosaic-image" /> <span class="sprocket-mosaic-link-text">Slideshow HTML</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 html5 slider " 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 css carousel " 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 " 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> <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-image-slider-12.html"> <img src="https://cssslider.com/sliders/demo-12/thumb.jpg" alt="non jQuery Image Slider wordpress slideshow " class="sprocket-mosaic-image" /> <span class="sprocket-mosaic-link-text">non jQuery Image 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/slider-jquery-11.html"> <img src="https://cssslider.com/sliders/demo-11/thumb.jpg" alt="Slider w/o jQuery css3 slider " class="sprocket-mosaic-image" /> <span class="sprocket-mosaic-link-text">Slider w/o jQuery</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/bootstrap-slider-10.html"> <img src="https://cssslider.com/sliders/demo-10/thumb.jpg" alt="Bootstrap Slider html5 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="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/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="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/bootstrap-carousel-8.html"> <img src="https://cssslider.com/sliders/demo-8/thumb.jpg" alt="Bootstrap Carousel wordpress 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="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-carousel-7.html"> <img src="https://cssslider.com/sliders/demo-7/thumb.jpg" alt="non-jQuery Carousel html5 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="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/image-slider-6.html"> <img src="https://cssslider.com/sliders/demo-6/thumb.jpg" alt="Image Slider wordpress carousel " class="sprocket-mosaic-image" /> <span class="sprocket-mosaic-link-text">Image 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/image-gallery-5.html"> <img src="https://cssslider.com/sliders/demo-5/thumb.jpg" alt="Image Gallery html carousel " 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="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/html-slider-4.html"> <img src="https://cssslider.com/sliders/demo-4/thumb.jpg" alt="HTML Slider jquery slideshow " class="sprocket-mosaic-image" /> <span class="sprocket-mosaic-link-text">HTML 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-slideshow-3.html"> <img src="https://cssslider.com/sliders/demo-3/thumb.jpg" alt="non-jQuery Slideshow responsive carousel " 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="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/responsive-slider-2.html"> <img src="https://cssslider.com/sliders/demo-2/thumb.jpg" alt="Responsive Slider html carousel " 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="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-slider-1.html"> <img src="https://cssslider.com/sliders/demo-1/thumb.jpg" alt="non-jQuery Slider css slider " 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="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-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 class="customfp-top rt-center rt-big-title"> <p>It seems, photo sliders are everywhere. And certainly you are able to choose a lot of photo sliders that allow you to show pictures and images on your site, but they're all fairly straightforward, with exactly the same need of jQuery and Javascript. Why hold the heavy and overloaded libraries when all can be completed with the crystal clear and light CSS? cssSlider is the single pure CSS slider that offers a combo of fabulous CSS3 animations, pre-created themes, icon fonts, full-functional navigation controls and a no-coding slider production.</p> </div>  <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> </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"> © 2017 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 class="rt-block footer-links"><ul><li> <a href="https://mobiriseicons.com/" target="_blank">Icon Font</a> <a href="https://mobirise.com/bootstrap-carousel/" target="_blank">Bootstrap Carousel</a> <a href="http://easyhtml5video.com/" target="_blank">HTML5 Video</a> <a href="https://mobirise.com/" target="_blank">Free Website Builder</a> </li> </ul> </div> </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

Live Demo’s