Image Slider - Free Pure CSS3 carousel

<!DOCTYPE html> <html xml:lang="en-gb" lang="en-gb"> <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 - Free Pure CSS3 carousel</title> <meta name="description" content="Bootstrap image slider. Responsive, mobile-friendly, full screen, retina-ready, touch-friendly. Outstanding Hardware-accelerated effects and templates. No more jQuery" /><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/demos.html"><i class="icon-th"></i> Live Demos</a> </li> <li> <a class="item" href="https://cssslider.com/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> Buy Now</a> </li> <li> <a class="item" href="#" title="English"><i class="flag-en"></i> EN <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/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 class="column col2" style="width:67px;"> <ul> <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> <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='HTML iphoto slider awesome image' 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='HTML5 very simple pure slider picture samples' 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='CSS ship image rotator download' 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='Responsive free swf banner js download' title='White rose' /> </li> </ul> <a class="cs_lnk" href="https://cssslider.com"> Bootstrap image slideshow </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='Wordpress gallery simple free scale code' 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='CSS3 vertical with menu slider multiple button image' 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='Bootstrap 3d website used for images' 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 img background example free donwload' 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 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/jquery-carousel-slider-33.html"> <img src="https://cssslider.com/sliders/demo-33/thumb.jpg" alt="no-jQuery Carousel Slider html5 carousel " class="sprocket-mosaic-image" /> <span class="sprocket-mosaic-link-text">no-jQuery Carousel Slider</span> <span class="sprocket-mosaic-hover"></span> <span class="sprocket-mosaic-hovercontent" data-content="View 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/slider-no-js-25.html"> <img src="https://cssslider.com/sliders/demo-25/thumb.jpg" alt="Slider w/o JS responsive carousel " 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="View 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/bootstrap-slider-10.html"> <img src="https://cssslider.com/sliders/demo-10/thumb.jpg" alt="Bootstrap Slider html5 " 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="View 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/responsive-slider-2.html"> <img src="https://cssslider.com/sliders/demo-2/thumb.jpg" alt="Responsive Slider wordpress slider " 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="View 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"> <div class="module-surround"> <div class="module-title"><h2 class="title"><span>100 % Pure CSS Slideshow?</span></h2></div> <div class="module-content"> <div id="download" class="customfp-feature rt-center rt-big-title"> <div class="gantry-width-80 gantry-width-block rt-center rt-margin-auto"> <p>Make gorgeous photo sliders completely in CSS. No jQuery, no JavaScript, no graphic icons, no coding! It's amazingly fast, light, adaptive, and retina-ready. Runs on all todays devices and browsers. KenBurns, Slide, Fade, Zoom transitions and a bunch of flat designs are accessible. Get a free slider maker for Windows and Mac now!</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 for Win</a> <a href="https://cssslider.com/cssslider-mac-setup.zip" class="readon rt-large-button download-button"><span class="icon-apple"></span> Download for Mac</a> </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-refresh"></span><span>Real-time Preview</span></h2> <p>Immediately preview your slider and all updates which you make in the preview window. Make Sure anything is just how you need it ahead you publish!</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>Color Combos</span></h2> <p>Each cssSlider theme contains 6 pre-made color design to make your selection simpler.</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>Users do not always visit your site from the comforts of their home office pc. Many use smart phones, tablets, notebooks, or one of the other numerous devices out there. This powerful, liquid slider will perfectly scale itself to fit all screen resolution, ensuring your site can look perfectly on any mobile!</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-external-link"></span><span>Adaptive slider</span></h2> <p>Responsive slider matches perfectly to your website, regardless of the screen dimension</p> </div> </div> <div class="gantry-width-33 gantry-width-block rt-left"> <div class="gantry-width-spacer"> <h2><span class="title-icon icon-rocket"></span><span>Non-jQuery Slider</span></h2> <p>No further large and slow-moving jQuery with lots of unused code</p> </div> </div> <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 Friendly</span></h2> <p>cssSlider is created with plain HTML5. It looks fantastic and search engines are still able to crawl it effortlessly. This allows you to keep your visitors and search engines both pleased at the same time!</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-code"></span><span>100 % Pure CSS Slider</span></h2> <p>Forget about any JavaScript - this picture slider is made with CSS and HTML at 100%</p> </div> </div> </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 Template Image Slider</h2> <p> This slider is a full-width, CSS-only slider that is dramatic and beautiful. It has touch-swipe enabled, which makes it ideal for tablets and smart phones, and it is also very fast to load. </p> <p align="center"><img src="https://cssslider.com/sliders/demo-6/preview.jpg" style="border: 0px"></p> <p> Because the slider is full-width, the images have maximum impact, making this slider a great choice for photographers and other people who want the focus of their site to be on images. </p><p> There are two navigational arrows and a pause/play button that appear when the user interacts with or hovers over the slides. These use bold white icons against a deep blue circular background. They seem to 'drop' into position, fading in and shrinking down. It's a dramatic and attractive effect, that works just as well in reverse, when the icons seem to 'rise' off the slider. The whole thing gives the design a 3-dimensional feel. </p><p> Hovering over the icons creates a blue border that seems to radiate out from the central circle and then fade away. Again, it's a stylish and dramatic effect that really makes this slider design stand out. </p><p> The icons do exactly what you would expect: clicking on next/previous arrows take you to the relevant slides, and clicking on the play/pause button will either stop the slideshow or start it going. </p><p> The user can also navigate between slides by using the circles at the bottom center of the screen. These circles are deep blue, and each one represents an image in the slideshow. When a new image moves into the viewport, the relevant circle gains a semi-transparent bold white border that draws the eye and helps the user understand how the circles work. </p><p> Interacting with the circles displays a preview image in a blue frame. This preview image drops in and flies out in the same way that the other icons do. Clicking on a circle then loads that image into the slideshow. </p><p> Each image in the slidehow 'slides' to the next one, either to the left or right depending on if it is the next slide or a previous one. When using the circles to navigate to an image two or three slides away, or when the slideshow reaches the 'end' of the images and goes back to the beginning it runs quickly through all the slides. This gives it a natural, 'realistic' feel that is quite subtle but makes the slider feel friendly and organic. </p><p> A caption sits in the left bottom corner. There is a title and a subtitle, both white text on a semi-transparent blue rectangle. The captions 'drop' and 'rise' in and out of place in the same way as the other icons and the preview images. The semi-transparent blue background allows the colors of the photo below to show through, and gives the caption a slightly softer feel. </p><p> The captions use Duru Sans, a sans-serif font that mixes humanist and modernist design. The result is very elegant, and gives the design a sophisticated feel. </p><p> Because there's no JQuery, no javascript and no images, this slider is fast and works on any platform. It will be perfect for 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 - Free Pure CSS3 carousel