Full Width Slider - Innovative 100% CSS 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>Full Width Slider - Innovative 100% CSS carousel</title> <meta name="description" content="non-jQuery image slider. Responsive, mobile-ready, full width, retina-ready, touch-friendly. Striking CSS3 effects and skins. 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/full-width-slider-14.html" title="Deutsch"><i class="flag-de"></i> DE</a></li> <li><a class="item" href="https://cssslider.com/fr/full-width-slider-14.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/full-width-slider-14.html" title="Español"><i class="flag-es"></i> ES</a></li> <li><a class="item" href="https://cssslider.com/nl/full-width-slider-14.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-14/engine1/style.css">   <script type="text/javascript" src="https://cssslider.com/sliders/demo-14/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-14/data1/images/christmas17159_1280.jpg" alt='Responsive timeline form slider online images tool' style="width: 100%;"> </li> <li class='num0 img slide'> <img src="https://cssslider.com/sliders/demo-14/data1/images/christmas17159_1280.jpg" alt='jQuery free codes images slider generate code video' title='Christmas' /> </li> <li class='num1 img slide'> <img src="https://cssslider.com/sliders/demo-14/data1/images/gift553144_1280.jpg" alt='Bootstrap header with thumbnails slider gallery infolder' title='Gift' /> </li> <li class='num2 img slide'> <img src="https://cssslider.com/sliders/demo-14/data1/images/bag21467_1280.jpg" alt='HTML5 multiple pages slider stacked photo' title='Bag' /> </li> </ul> <a class="cs_lnk" href="https://cssslider.com">CSS3 simple fade download carousel simple caption download</a> <div class='cs_description'> <label class='num0'> <span class="cs_title"><span class="cs_wrapper">Christmas</span></span> <br/><span class="cs_descr"><span class="cs_wrapper">Christmas present</span></span> </label> <label class='num1'> <span class="cs_title"><span class="cs_wrapper">Gift</span></span> <br/><span class="cs_descr"><span class="cs_wrapper">Christmas present</span></span> </label> <label class='num2'> <span class="cs_title"><span class="cs_wrapper">Bag</span></span> <br/><span class="cs_descr"><span class="cs_wrapper">Christmas present</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> </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> </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> </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-14/data1/tooltips/christmas17159_1280.jpg" alt='Responsive box visual studio slideshow panel horizontal c' title='Christmas' /></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-14/data1/tooltips/gift553144_1280.jpg" alt='jQuery button next back slider thumbnail cpde' title='Gift' /></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-14/data1/tooltips/bag21467_1280.jpg" alt='Wordpress webpage gallery slider content tab click' title='Bag' /></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-content-slider-31.html"> <img src="https://cssslider.com/sliders/demo-31/thumb.jpg" alt="no-jQuery Content Slider responsive carousel " 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="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/carousel-jquery-28.html"> <img src="https://cssslider.com/sliders/demo-28/thumb.jpg" alt="Carousel w/o jQuery responsive slideshow " 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="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/image-slider-6.html"> <img src="https://cssslider.com/sliders/demo-6/thumb.jpg" alt="Image Slider html5 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="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/html-slider-4.html"> <img src="https://cssslider.com/sliders/demo-4/thumb.jpg" alt="HTML Slider jquery slider " 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="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 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>Develop breathtaking picture sliders fully in CSS. No jQuery, no JavaScript, no image icons, no programming! It's really smooth, light, liquid, and retina-ready. Operates fine on all todays devices and web browsers. Rotate, Pan & Zoom, KenBurns, Fade, Slide effects and a few flat skins are accessible. Get a slider creator 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-wrench"></span><span>Extra Options</span></h2> <p>There is a whole lot of options you can tweak, including perfect transition transitions and vibrant flat themes, prev/next navigation, bullets with thumbnails, autoplay, pause/stop, full width, full screen and additional options.</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>Striking animations</span></h2> <p>cssSlider includes remarkable pure CSS3, hardware-accelerated animations to excite your visitors and help to keep their attention focused on your own website.</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 prev/next arrows, bullets, play/pause and other controls are vector font, making them monitor size independent and excellent for retina high-res displays.</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>Build your slider in a few seconds with the visual creator</p> </div> </div> <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 could not be simpler to use. Add and delete images, alter the order, embed sliders in a couple of clicks.</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 Slider</span></h2> <p>Forget about using any JavaScript - this photo slider is created with CSS and HTML exclusively</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-mobile"></span><span>Mobile</span></h2> <p>cssSlider is fully compatible with any and all mobile devices and will perform just as well on your Android, iPhone, iPad as it does on your home desktop computer.</p> </div> </div> <div class="gantry-width-33 gantry-width-block rt-left"> <div class="gantry-width-spacer"> <h2><span class="title-icon icon-refresh"></span><span>Live Preview</span></h2> <p>Immediately preview your slider and all modifications which you make in the preview spot. Be Sure Of everything is just the way you want 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-external-link"></span><span>Responsive slider</span></h2> <p>Adaptive slider suits nicely to your website, in spite of the display size</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-check"></span><span>Cross-browser</span></h2> <p>Works perfectly on each modern mobile gadgets and web browsers, including old 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-asterisk"></span><span>Gorgeous themes</span></h2> <p>Choose designs, colors and transitions in the impressive group that is incorporated and ready to go.</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"> KenBurns Transition & Slim Template Full Width Slider</h2> <p>Sometimes you want a slider for your website that has maximum impact — it’s the first thing people see and pay attention to when they visit your site. This full-width theme for cssSlider really delivers. </p> <p>Sleek, large and beautiful, this slideshow theme puts the emphasis on your images. As such, it is perfect for photographers and artists who want to showcase their work without distractions. It’s also great for any business that wants their images to be the leading statement about what they do — such as travel companies, restaurants, and e-commerce sites. </p> <p>The slider is completely responsive, quick to load, and works on any device with a modern browser. It has a blue and white color scheme that is extremely attractive. </p> <p align="center"><img src="https://cssslider.com/sliders/demo-14/preview.jpg" style="border: 0px"></p> <p>The user can navigate through the slideshow in two ways. The first is to use the series of bullets at the center-bottom of the slideshow. This is a common kind of navigation that many people will already be familiar with. Each circle represents an image in the slideshow, and is highlighted when that image displays. The circles themselves are simple and blue, with a very clean appearance. When highlighted, the circle turns transparent with a blue border. Hovering over a circle brings up a preview of the slide. This is a small, rectangle image within a blue picture frame. </p> <p>The second way the user can navigate through the slideshow is via the use of the interface icons. These appear when the user mouses-over the slideshow. The icons drop smoothly into place, with no delays or loading times due to the use of CSS3 animation techniques. The result looks and feels extremely modern. </p> <p>There are three icons, a next and previous arrow on either side of the slider, and a pause/play button in the center. If the user mouses off the slider these icons disappear. </p> <p>The icons comprise of blue circles with white icons. The icons themselves are stylish and unique, with the next/previous arrows in particular using an arrow head and series of dots that is unusual and helps your slider stand out. </p> <p>When you hover over an icon, the circle turns transparent with a blue border. Again, the transition is extremely smooth and gentle due to the use of CS3 animation. </p> <p>There is a caption for each image in the slideshow. This is comprised of a title and a sub-title. The title appears on a blue rectangle with rounded corners, and the subtitle appears below on a white rectangle with rounded corners. These rectangles fade and drop smoothly into place in the lower left corner of the slideshow. </p> <p>The font used in the captions is ‘Lobster’, an attractive and unique script font that works well with the other artistic flourishes on the icons. </p> <p>The slideshow uses the ‘kenburns’ transition effect, which fades and moves slowly. It’s a calm, clean transition from one image to the next and works well with this design. </p> <p>If you want a beautiful, clean and modern slideshow for your website that does not distract from your pictures then this design from cssSlider is the one for you. </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

Full Width Slider - Innovative 100% CSS carousel