Bootstrap Slider - Excellent CSS-only 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>Bootstrap Slider - Excellent CSS-only slide show</title> <meta name="description" content="Bootstrap slider. Responsive, mobile-friendly, full width, retina-ready, swipe-friendly. Spectacular Hardware-accelerated animations and themes. 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/bootstrap-slider-10.html" title="Deutsch"><i class="flag-de"></i> DE</a></li> <li><a class="item" href="https://cssslider.com/fr/bootstrap-slider-10.html" title="Français"><i class="flag-fr"></i> FR</a></li> <li><a class="item" href="https://cssslider.com/it/bootstrap-slider-10.html" title="Italiano"><i class="flag-it"></i> IT</a></li> <li><a class="item" href="https://cssslider.com/pt/bootstrap-slider-10.html" title="Português"><i class="flag-pt"></i> PT</a></li> <li><a class="item" href="https://cssslider.com/da/bootstrap-slider-10.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/bootstrap-slider-10.html" title="Español"><i class="flag-es"></i> ES</a></li> <li><a class="item" href="https://cssslider.com/nl/bootstrap-slider-10.html" title="Nederlands"><i class="flag-nl"></i> NL</a></li> <li><a class="item" href="https://cssslider.com/ja/bootstrap-slider-10.html" title="日本語"><i class="flag-ja"></i> JA</a></li> <li><a class="item" href="https://cssslider.com/no/bootstrap-slider-10.html" title="Norsk"><i class="flag-no"></i> NO</a></li> <li><a class="item" href="https://cssslider.com/sv/bootstrap-slider-10.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-10/engine1/style.css">   <script type="text/javascript" src="https://cssslider.com/sliders/demo-10/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'> <a class="cs_lnk" href="https://mobirise.com/bootstrap-carousel/">bootstrap slider</a> <ul> <div> <img src="https://cssslider.com/sliders/demo-10/data1/images/1.jpg" style="width: 100%;"> </div> <li class='num0 img'> <img src="https://cssslider.com/sliders/demo-10/data1/images/1.jpg" alt='CSS values for date slider rounded demo' title='Material Design' /> </li> <li class='num1 img'> <a href="https://mobirise.com/bootstrap-carousel/" target="_blank"><img src="https://cssslider.com/sliders/demo-10/data1/images/2.jpg" alt='bootstrap slider' title='Material Design' /></a> </li> <li class='num2 img'> <img src="https://cssslider.com/sliders/demo-10/data1/images/3.jpg" alt='Bootstrap full screen auto carousel download ad' title='Material Design' /> </li> </ul> <a class="cs_lnk" href="https://cssslider.com">HTML5 image carousel</a> <div class='cs_description'> <label class='num0'> <span class="cs_title"><span class="cs_wrapper">Material Design</span></span> <br/><span class="cs_descr"><span class="cs_wrapper">Material design is a design language developed by Google and announced at the Google I/O conference on June 25, 2014. </span></span> </label> <label class='num1'> <span class="cs_title"><span class="cs_wrapper">Material Design</span></span> <br/><span class="cs_descr"><span class="cs_wrapper">Expanding upon the "card" motifs first seen in Google Now, it is a cleaner design with increased use of grid-based layouts, responsive animations and transitions, padding, and depth effects such as lighting and shadows.</span></span> </label> <label class='num2'> <span class="cs_title"><span class="cs_wrapper">Material Design</span></span> <br/><span class="cs_descr"><span class="cs_wrapper">Designer MatГas Duarte explained that "unlike real paper, our digital material can expand and reform intelligently. Material has physical surfaces and edges. Seams and shadows provide meaning about what you can touch." Google states that their new design language is based on paper and ink.</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> </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-10/data1/tooltips/1.jpg" alt='HTML5 download free free carousel top banner download' title='Material Design' /></span> </label> <label class='num1' for='cs_slide1_1'> <span class='cs_point'></span> <span class='cs_thumb'><a href="https://mobirise.com/bootstrap-carousel/" target="_blank"><img src="https://cssslider.com/sliders/demo-10/data1/tooltips/2.jpg" alt='bootstrap image slider' title='Material Design' /></a></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-10/data1/tooltips/3.jpg" alt='Bootstrap images with web slider code design' title='Material Design' /></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/slider-html-22.html"> <img src="https://cssslider.com/sliders/demo-22/thumb.jpg" alt="Slider HTML jquery slideshow " 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="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-slider-17.html"> <img src="https://cssslider.com/sliders/demo-17/thumb.jpg" alt="Carousel Slider html5 slider " 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="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/slideshow-html-16.html"> <img src="https://cssslider.com/sliders/demo-16/thumb.jpg" alt="Slideshow HTML html5 slider " 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="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-slideshow-9.html"> <img src="https://cssslider.com/sliders/demo-9/thumb.jpg" alt="HTML Slideshow html5 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="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% 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>Develop beautiful image sliders fully in CSS. No jQuery, no JavaScript, no graphic icons, no programming! It's truly smooth, light, liquid, and retina-ready. Works on each current devices and browsers. KenBurns, Slide, Fade, Zoom transitions and some templates are accessible. Get a 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-code"></span><span>100 % Pure CSS</span></h2> <p>cssSlider is strictly CSS powered (zero jQuery, zero JavaScript), so it's going to play in any browser, without the need for any extra script libraries.</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 Options</span></h2> <p>That is a great amount of settings that you may tweak, such as perfect transition transitions and brilliant flat themes, prev/next navigation, bullets with thumbnails, auto play, 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-bug"></span><span>SEO Friendly</span></h2> <p>cssSlider is crafted with plain HTML5. It looks fantastic and search engines are still able to crawl it efficiently. This enables you to keep your visitors and search engines both thankful all at one 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>Absolute CSS Slider</span></h2> <p>Just forget about using any JavaScript - this picture slider is made with CSS and HTML exclusively</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>User-friendly, you just assign different templates, colors and transitions from the collection to your own slider. There's absolutely no knowledge of programming required at all. You may not need to type a single-line of 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-external-link"></span><span>Liquid Design</span></h2> <p>People don't always visit your blog from the comforts of their home office desktop computer. Many use mobile phones, tablets, notebooks, or one of many other countless devices out there. This powerful, adaptive slider will perfectly scale itself to fit any monitor dimensions, guaranteeing your site will appear amazing 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-eye"></span><span>Retina-ready</span></h2> <p>All slider controls are vector font and they're excellent on hi-res displays</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 couldn't be simpler to use. Drop and remove pictures, change the ordering, embed sliders in a few 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-mobile"></span><span>Mobile-ready</span></h2> <p>cssSlider is completely compatible with any and all mobiles and will play just as well on your iPhone, iPad, Android as it does on your home desktop computer.</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-cloud"></span><span>Lightweight and compatible</span></h2> <p>Turbo page speed is a certainty due to it is not getting slowed down by JavaScript, together with being developed to the most current technological guidelines to allow it to be ultra-compatible.</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>Responsive slider fits nicely to your page, despite of the screen proportions</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 & Bootstrap Layout Bootstrap Slider</h2> <p> This CSS-only slider has a great design with more emphasis on the caption than many sliders. As such, it makes it useful for websites that need to use their carousels to display information as well as images. </p> <p align="center"><img src="https://cssslider.com/sliders/demo-10/preview.jpg" style="border: 0px"></p> <p> Two navigational arrows either side, appear all the time, a caption in the center bottom that includes a title and a paragraph of text, and a set of navigational circles at the bottom that allows the user to choose which slide they want to view. </p><p> The demo has an interesting 'shadow' effect down the left and right side. This helps the navigational elements, particularly the arrows, to stand out, and reduces the importance of the images. This <a href="https://mobirise.com/bootstrap-gallery/" style="color: rgb(72,72,72)">bootstrap gallery</a> is great for text against an interesting background image, and is not intended for sites that want to focus only on the images. </p><p> The navigational arrows are semi-transparent white arrow-heads with a subtle drop-shadow effect that gives them depth. When you hover over the arrows, the 'shadow' on that side darkens, and the arrow head becomes more opaque and thus brighter. Clicking on the arrows cycles through the images in the carousel. </p><p> The caption has white text that uses Helvetica Neue, perhaps one of the most recognizable and classic sans-serif fonts. It is a timeless font that can be used in almost any setting. </p><p> The text has a slight drop-shadow that helps it stand out from the background image and gives the caption some depth. Because the text appears directly on the image, you will want to ensure your text color and your background images have a high-contrast so that the caption is legible. </p><p> The navigational bullets are at the bottom center, each represent an image/caption in the slideshow. They are transparent, with a thin white border. A highlighted circle is opaque white with no border. Hovering over a circle brings up a preview image, in a white border. </p><p> The slider is built on a <a href="https://mobirise.com" style="color: rgb(72,72,72)">bootstrap builder</a> framework, that makes it extremely easy to customize to meet your needs. </p><p> Because the slider is CSS-only, it works in browsers that don't have JQuery or Javascript enabled. It also makes the slider extremely fast to load, as there is no bloated javascript code or images to download. As such, it is a great slider design for mobile-first developers looking for a simple, responsive slider for the modern web. </p><p> Since this sample is developed using HTML5 and CSS it is search engine friendly, which is useful for a slider with an emphasis on text. All the captions in your slideshow will have SEO value. </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

Bootstrap Slider - Excellent CSS-only slide show