Slider HTML - Fantastic Pure CSS3 slider

<!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>Slider HTML - Fantastic Pure CSS3 slider</title> <meta name="description" content="CSS3 image slideshow. Responsive, mobile-ready, full screen, retina-ready, touch-friendly. Impressive CSS3 transitions and designs. Forget about 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/slider-html-22.html" title="Deutsch"><i class="flag-de"></i> DE</a></li> <li><a class="item" href="https://cssslider.com/fr/slider-html-22.html" 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 class="column col2" style="width:67px;"> <ul> <li><a class="item" href="https://cssslider.com/es/slider-html-22.html" title="Español"><i class="flag-es"></i> ES</a></li> <li><a class="item" href="https://cssslider.com/nl/slider-html-22.html" 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> <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-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-22/engine1/style.css">   <script type="text/javascript" src="https://cssslider.com/sliders/demo-22/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> <li class="cs_skeleton"> <img src="https://cssslider.com/sliders/demo-22/data1/images/rose574023_1280.jpg" alt='Bootstrap clickable code example slider making automatic thumbnails' style="width: 100%;"> </li> <li class='num0 img slide'> <img src="https://cssslider.com/sliders/demo-22/data1/images/rose574023_1280.jpg" alt='CSS simple image href slider styled image' title='Rose' /> </li> <li class='num1 img slide'> <img src="https://cssslider.com/sliders/demo-22/data1/images/dahlia572745_1280.jpg" alt='CSS make y online slideshow free softweare' title='Dahlia' /> </li> <li class='num2 img slide'> <img src="https://cssslider.com/sliders/demo-22/data1/images/poppy571634_1280.jpg" alt='HTML best gallery vertical carousel image vertikal' title='Poppy' /> </li> <li class='num3 img slide'> <img src="https://cssslider.com/sliders/demo-22/data1/images/primrose570601_1280.jpg" alt='Wordpress vertical horizontal free slideshow full image background' title='Primrose' /> </li> </ul> <a class="cs_lnk" href="https://cssslider.com">HTML homepage fading slideshow auto loop</a> <div class='cs_description'> <label class='num0'> <span class="cs_title"><span class="cs_wrapper">Rose</span></span> </label> <label class='num1'> <span class="cs_title"><span class="cs_wrapper">Dahlia</span></span> </label> <label class='num2'> <span class="cs_title"><span class="cs_wrapper">Poppy</span></span> </label> <label class='num3'> <span class="cs_title"><span class="cs_wrapper">Primrose</span></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-22/data1/tooltips/rose574023_1280.jpg" alt='Wordpress fadein fadeout div carousel preview prev next' title='Rose' /></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-22/data1/tooltips/dahlia572745_1280.jpg" alt='Wordpress notepad generator slider gallery fre' title='Dahlia' /></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-22/data1/tooltips/poppy571634_1280.jpg" alt='Wordpress fadein click carousel photo with buttons' title='Poppy' /></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-22/data1/tooltips/primrose570601_1280.jpg" alt='CSS image mousemove carousel inner buttons' title='Primrose' /></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-photo-gallery-26.html"> <img src="https://cssslider.com/sliders/demo-26/thumb.jpg" alt="non jQuery Photo Gallery css slideshow " 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="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/content-slider-23.html"> <img src="https://cssslider.com/sliders/demo-23/thumb.jpg" alt="Content Slider html5 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="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/non-jquery-image-slider-12.html"> <img src="https://cssslider.com/sliders/demo-12/thumb.jpg" alt="non jQuery Image Slider bootstrap 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="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/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="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>Pure CSS3 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>Create eye-catching picture sliders completely in CSS. No jQuery, no JavaScript, no graphic icons, no programming! It's really smooth, lightweight, adaptive, and retina-ready. Works well on each popular devices and web browsers. Rotate, Pan & Zoom, KenBurns, Fade, Slide transitions and a number of flat skins are accessible. Get a slider generator 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-crop"></span><span>Auto Cropping and Sizing</span></h2> <p>No more need for separate photo editing applications. The cssSlider immediately crops your graphics and resizes them to suit whatever dimension you specify!</p> </div> </div> <div class="gantry-width-33 gantry-width-block rt-left"> <div class="gantry-width-spacer"> <h2><span class="title-icon icon-sun"></span><span>Any color styles</span></h2> <p>CSS Slider doesn't need images for styling hence the template color could be conveniently altered</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 thick and slow-moving jQuery containing loads of unused code</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-paperclip"></span><span>Drag and Drop</span></h2> <p>With the drag-n-drop, cssSlider couldn't be easier to use. Include and remove images and videos, change the order, embed sliders in seconds.</p> </div> </div> <div class="gantry-width-33 gantry-width-block rt-left"> <div class="gantry-width-spacer"> <h2><span class="title-icon icon-play"></span><span>Impressive effects</span></h2> <p>cssSlider has remarkable pure CSS3, hardware-accelerated effects to delight your visitors and help keep their attention focused on your site.</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>Additional Settings</span></h2> <p>There's a large amount of settings you can tweak, including perfect transition transitions and brilliant flat templates, prev/next navigation, bullets with thumbnails, auto play, pause/stop, full width, full screen and alternatives.</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-tint"></span><span>Color Combos</span></h2> <p>Any cssSlider skin contains 6 ready-to-use color pattern to make your choice easier.</p> </div> </div> <div class="gantry-width-33 gantry-width-block rt-left"> <div class="gantry-width-spacer"> <h2><span class="title-icon icon-flag-checkered"></span><span>No coding</span></h2> <p>Prepare your slider in minutes with the visual maker</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"> Rotate Effect & Geometric Style Slider Html</h2> <p>This cssSlider template will present your images with an elegant edge as each slide does a graceful spiral fade in and out. Thanks to this dynamic entry and exit, this is one slider which will work beautifully on any site that hosts photos or illustrations with vibrant colors and a strong focal point. Visitors to your website will also enjoy consistent control of the slideshow all the way through, making your home page a place that they will undoubtedly want to return to again and again. </p> <p align="center"><img src="https://cssslider.com/sliders/demo-22/preview.jpg" style="border: 0px"></p> <p>The navigation is easy to spot and manage, with delicate white arrows on either side of the slidedeck in order to move ahead or to see past images. Viewers can stop the show at any point and take it back to the first slide by tapping anywhere on the image and whenever they’re ready to resume, they can proceed by using the white forward arrow on the right side of the screen. Meanwhile, the unobtrusive preview panel at the bottom of the slidedeck will show any of the slides in the show when users hover their mouse over the individual boxes. If you’re wondering where you are in the show, the box that represents the current slide will appear in a bolder white line than the rest to eliminate any confusion. Click on the box that’s linked to the image you want to see and the slideshow will take you to that image right away. </p> <p> There’s a transparent title box outlined in white in the upper right-hand corner of the images, and a new one slides in from the left with every change of scene. It uses a graceful, white script that is both easy to read and timeless enough to complement a wide range of site designs. As the slide exits the screen, the title box slides back to the left and the wording fades out, creating a more seamless transition to the next image and the new title box. </p> <p>With this pure CSS3-created slideshow, your photographs and drawings can easily be viewed on any modern mobile device without any hassle at all. In fact, you can reliably expect the same incredible performance that you’ve come to love in all cssSlider templates, even without the use of jQuery or JavaScript. Choose this template now and see how easy it is to build the perfect slideshow for your website in no time at all. </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

Slider HTML - Fantastic Pure CSS3 slider