Parallax Slider - Killer 100% CSS slide show

<!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>Parallax Slider - Killer 100% CSS slide show</title> <meta name="description" content="Wordpress slider. Responsive, mobile-ready, full screen, retina-ready, touch-gesture-friendly. Striking Hardware-accelerated animations and designs. No 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/" 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/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/" title="Español"><i class="flag-es"></i> ES</a></li> <li><a class="item" href="https://cssslider.com/nl/" 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-34/engine1/style.css">   <script type="text/javascript" src="https://cssslider.com/sliders/demo-34/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_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'> <ul> <li class="cs_skeleton"><img src="https://cssslider.com/sliders/demo-34/data1/images/chicago690364_1280.jpg" style="width: 100%;"></li> <li class='num0 img slide'> <img src="https://cssslider.com/sliders/demo-34/data1/images/chicago690364_1280.jpg" alt='Chicago' title='Chicago' /></li> <li class='num1 img slide'> <img src="https://cssslider.com/sliders/demo-34/data1/images/moscow630773_1280.jpg" alt='Moscow' title='Moscow' /></li> <li class='num2 img slide'> <img src="https://cssslider.com/sliders/demo-34/data1/images/skyline600001_1280.jpg" alt='New York' title='New York' /></li> </ul> <div class='cs_description'> <label class='num0'><span class="cs_title"><span class="cs_wrapper">Chicago</span></span></label> <label class='num1'><span class="cs_title"><span class="cs_wrapper">Moscow</span></span></label> <label class='num2'><span class="cs_title"><span class="cs_wrapper">New York</span></span></label> </div> <div class='cs_arrowprev'> <label class='num0' for='cs_slide1_0'><span><i></i><b></b></span><img src="https://cssslider.com/sliders/demo-34/data1/tooltips/chicago690364_1280.jpg" alt='Chicago' title='Chicago' /></label> <label class='num1' for='cs_slide1_1'><span><i></i><b></b></span><img src="https://cssslider.com/sliders/demo-34/data1/tooltips/moscow630773_1280.jpg" alt='Moscow' title='Moscow' /></label> <label class='num2' for='cs_slide1_2'><span><i></i><b></b></span><img src="https://cssslider.com/sliders/demo-34/data1/tooltips/skyline600001_1280.jpg" alt='New York' title='New York' /></label> </div> <div class='cs_arrownext'> <label class='num0' for='cs_slide1_0'><span><i></i><b></b></span><img src="https://cssslider.com/sliders/demo-34/data1/tooltips/chicago690364_1280.jpg" alt='Chicago' title='Chicago' /></label> <label class='num1' for='cs_slide1_1'><span><i></i><b></b></span><img src="https://cssslider.com/sliders/demo-34/data1/tooltips/moscow630773_1280.jpg" alt='Moscow' title='Moscow' /></label> <label class='num2' for='cs_slide1_2'><span><i></i><b></b></span><img src="https://cssslider.com/sliders/demo-34/data1/tooltips/skyline600001_1280.jpg" alt='New York' title='New York' /></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 bootstrap 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/css-slideshow-24.html"> <img src="https://cssslider.com/sliders/demo-24/thumb.jpg" alt="CSS Slideshow jquery slider " 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="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/wordpress-slider-plugin-21.html"> <img src="https://cssslider.com/sliders/demo-21/thumb.jpg" alt="Wordpress Slider Plugin bootstrap slideshow " 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="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/javascript-slideshow-19.html"> <img src="https://cssslider.com/sliders/demo-19/thumb.jpg" alt="non-Javascript Slideshow wordpress slideshow " 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="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>Absolute CSS Slider?</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 fully in CSS. No jQuery, no JavaScript, no graphic icons, no hand scripting! It's surprisingly smooth, lightweight, liquid, and retina-ready. Works on every popular devices and internet browsers. Rotate, Pan & Zoom, KenBurns, Fade, Slide animations and some designs are available. Download a free slider builder 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-tint"></span><span>Color Combinations</span></h2> <p>Every Single cssSlider theme includes 6 ready-to-use color scheme to make your choice 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-code"></span><span>Pure CSS</span></h2> <p>cssSlider is exclusively CSS based (not Flash, not jQuery, not Javascript), so it's going to run in any browser, without the need for any additional plugins.</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>Liquid Design</span></h2> <p>Visitors don't always visit your website from the comforts of their home office pc. Many use smart phones, tablets, laptops, or one of the other numerous devices out there. This powerful, liquid slider will perfectly scale itself to match any screen dimensions, ensuring your website will appear awesome on any device!</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-flag-checkered"></span><span>Absolutely no coding</span></h2> <p>Create your slider in a few seconds with the visual generator</p> </div> </div> <div class="gantry-width-33 gantry-width-block rt-left"> <div class="gantry-width-spacer"> <h2><span class="title-icon icon-desktop"></span><span>Retina-ready</span></h2> <p>The slider bullets, play/pause, prev/next and other controls are icon font, making them monitor size independent and excellent for retina high resolution monitors and screens.</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 animations</span></h2> <p>cssSlider includes incredible pure CSS3, hardware-accelerated animations to excite your customers and help keep their eyes focused on your website.</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-asterisk"></span><span>Beautiful skins</span></h2> <p>Pick designs, colors and transitions from the astonishing compilation that is contained and prepared to go.</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 made with plain HTML5. It looks fabulous and search engines are still able to crawl it efficiently. This allows you to keep your visitors and search engines both thankful at one time!</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 Features</span></h2> <p>There is a great amount of options that you can tweak, including enchanting transition transitions and brilliant flat designs, prev/next navigation, bullets with thumbnails, auto-play, pause/stop, full width, full screen and additional options.</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-play"></span><span>CSS3 effects</span></h2> <p>Silky smooth hardware-accelerated transitions perform much better than jQuery ones, especially on mobile devices</p> </div> </div> <div class="gantry-width-33 gantry-width-block rt-left"> <div class="gantry-width-spacer"> <h2><span class="title-icon icon-check"></span><span>Cross-browser</span></h2> <p>Runs fine on each todays mobiles and internet browsers, including early IEs (with the optional js fallback)</p> </div> </div> <div class="gantry-width-33 gantry-width-block rt-left"> <div class="gantry-width-spacer"> <h2><span class="title-icon icon-magic"></span><span>Straightforward to Use</span></h2> <p>Simple to use, you just assign various templates, colors and effects from the library to your slider. There is zero understanding of programming necessary at all. You won't need to type a single line of code!</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 Verical Transition & Boundary Style Parallax Slider</h2> <p>This slider template from cssSlider is a dramatic template that uses a peach and white color scheme and bold, geometric shapes to draw attention and make a statement. </p> <p>As with all templates from cssSlider, the design is responsive. On smaller devices the images resize to fit the screen, and some of the UI elements disappear to make the slider more useable. On larger screens, the images take up the full amount of space available and the UI elements reappear. This means the slider works on smartphones, tablets, laptops, desktop computers, and even smart TVs. </p> <p>In addition, because the slider uses HTML5 and CSS3 rather than JQuery or JavaScript, the template is extremely fast to load - with all the benefits that brings to your website. Loading time is increasingly a factor in SEO, and on mobile devices a short load time means your visitors are much more likely to stay on your website. </p> <p align="center"><img src="https://cssslider.com/sliders/demo-34/preview.jpg" style="border: 0px"></p> <p>The images in the slideshow are large and slightly more square than many other slider templates out there. This provides much greater flexibility in terms of the images you can use within your slider. </p> <p>Each image transitions by rising slowly from below, as though each image is on a spool being wound up. This effect is reinforced by the fact that, at the end of the slideshow, the images ‘rush’ back to the beginning. </p> <p>On the left and right hand sides of the slider are two peach colored rectangles that nestle against the side of the image. Hovering over these rectangles causes them to expand in both directions and a preview of the next or previous image in the slideshow to appear. You can click the arrow to then load this image. It’s a powerful way of navigating the slider. </p> <p>In the left corner, nestled against the corner of the image, is a caption on a peach rectangle. This caption slides in from the left as the image in the slideshow changes. It also features a fade in. It’s a nice affect, that isn’t too distracting. The text is in white, and uses a lovely geometric font called Poiret One. It’s light, sleek and simple and works brilliantly with the other bold shapes in the slider template. </p> <p>This slider does not have a play/pause button or bullet navigation, though these can be added if needed by using cssSlider. The absence of the extra UI elements however helps to create the bold simplicity of this theme, and also gives more space to the images. </p> <p>The slider could be used in many different kinds of websites, but is particularly suited to IT and tech sites, thanks to its modern, sleek look and to stylish fashion or high-end luxury e-commerce websites thanks to it’s bold choice of design elements and colors. </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

Parallax Slider - Killer 100% CSS slide show