Image-Slider ohne jQuery, nur mit CSS

<!DOCTYPE html> <html xml:lang="de" lang="de"> <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 ohne jQuery, nur mit CSS</title> <meta name="description" content="Responsive Slider mit purem CSS. Geniale Animationen und Templates. Visuelle erstellung – kein Scripting!" /> <link rel="stylesheet" href="../styles.min.css" type="text/css"/> </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"> <input type="radio" name="devices" id="device-fullwidth" class="devices-input" checked> <input type="radio" name="devices" id="device-laptop" class="devices-input"> <input type="radio" name="devices" id="device-mobile" class="devices-input"> <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="devices-block"> <label for="device-fullwidth" title="Full Width" class="readon fullwidth"><i class="icon-fullwidth"></i></label> <label for="device-laptop" title="Boxed" class="readon laptop"><i class="icon-laptop"></i></label> <label for="device-mobile" title="Mobile" class="readon mobile"><i class="icon-mobile"></i></label> </div> <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> <a class="item" href="https://cssslider.com/de/demos.html"><i class="icon-th"></i> Live Demos</a> </li> <li> <a class="item" href="https://cssslider.com/de/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> Jetzt Kaufen</a> </li> <li> <a class="item" href="#" title="Deutsch"><i class="flag-de"></i> DE <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/" title="English"><i class="flag-en"></i> EN</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"> <iframe id="slider-iframe" src="../sliders/home/slider-de.html" frameborder="0"></iframe> </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 id="download" class="customfp-top rt-center rt-big-title"> <p>Erstellen Sie wunderschöne Image-Slider nur it Css. Kein jQuery, kein Javascript, keine Bild-Icons, kein Coding! Es ist unglaublich schnell, leicht, responsive und retina-ready. Es Funktioniert auf allen modernen Geräte und Browsern. KenBurns, Slide, Fade, Zoom Effekte und ein paar Flat-Skins sind verfügbar (es werden mehr kommen). Downloaden sie einen Gratis Slider Generator für Windows und Mac jetzt! </p> </div>  <div class="rt-readon-row"> <a href="../cssslider-win-setup.zip" class="readon rt-large-button download-button download-for-win"><span class="icon-windows"></span> Download für Win</a> <a href="../cssslider-mac-setup.zip" class="readon rt-large-button download-button"><span class="icon-apple"></span> Download für Mac</a> </div>  </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/de/jquery-content-slider-31.html"> <img src="https://cssslider.com/sliders/demo-31/thumb.jpg" alt="no-jQuery Content Slider responsive slider " 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="Demo ansehen"></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/de/image-slider-jquery-30.html"> <img src="https://cssslider.com/sliders/demo-30/thumb.jpg" alt="Image Slider w/o jQuery css3 slideshow " class="sprocket-mosaic-image" /> <span class="sprocket-mosaic-link-text">Image Slider w/o jQuery</span> <span class="sprocket-mosaic-hover"></span> <span class="sprocket-mosaic-hovercontent" data-content="Demo ansehen"></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/de/slideshow-jquery-29.html"> <img src="https://cssslider.com/sliders/demo-29/thumb.jpg" alt="Slideshow w/o jQuery html5 " class="sprocket-mosaic-image" /> <span class="sprocket-mosaic-link-text">Slideshow w/o jQuery</span> <span class="sprocket-mosaic-hover"></span> <span class="sprocket-mosaic-hovercontent" data-content="Demo ansehen"></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/de/carousel-jquery-28.html"> <img src="https://cssslider.com/sliders/demo-28/thumb.jpg" alt="Carousel w/o jQuery html5 " 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="Demo ansehen"></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="features" class="rt-overlay-light"><div class="rt-container"> <div class="rt-grid-3 rt-alpha"> <div class="rt-block rt-center"> <div class="module-surround"> <div class="module-content"> <div class="customrt-center"> <span class="rt-icon"><span class="icon-code title"></span></span> <h1 class="title rt-capitalize">Pure CSS Slider</h1> <p>Vergessen Sie Javascript – dieser Image Slider besteht ausschließlich aus HTML und CSS.</p> </div> </div> </div> </div> <div class="rt-block rt-center"> <div class="module-surround"> <div class="module-content"> <div class="customrt-center"> <span class="rt-icon"><span class="icon-check title"></span></span> <h1 class="title rt-capitalize">Cross-browser</h1> <p>Funktioniert auf allen Geräten und modernen Browsern, , beinhalted auch alte IEs (mit optionalem js fallback)</p> </div> </div> </div> </div> </div> <div class="rt-grid-3"> <div class="rt-block rt-center"> <div class="module-surround"> <div class="module-content"> <div class="customrt-center"> <span class="rt-icon"><span class="icon-play title"></span></span> <h1 class="title rt-capitalize">CSS3 Effekte</h1> <p>Flüssige Hardware-Beschleunigte Animationen arbeiten viel besser als jQuery, speziell auf Mobilen Geräten. </p> </div> </div> </div> </div> <div class="rt-block rt-center"> <div class="module-surround"> <div class="module-content"> <div class="customrt-center"> <span class="rt-icon"><span class="icon-eye title"></span></span> <h1 class="title rt-capitalize">Retina-ready</h1> <p>Alle Slider-Controlls sind Vektoricon-Schriftarten und sie sind perfekt für Hochauflösende Displays.</p> </div> </div> </div> </div> </div> <div class="rt-grid-3 rt-omega"> <div class="rt-block rt-center"> <div class="module-surround"> <div class="module-content"> <div class="customrt-center"> <span class="rt-icon"><span class="icon-rocket title"></span></span> <h1 class="title rt-capitalize">Slider ohne jQuery</h1> <p>Nie mehr schwerer und langsamer jQuery code mit Tonnen von unbenutztem code. </p> </div> </div> </div> </div> <div class="rt-block rt-center"> <div class="module-surround"> <div class="module-content"> <div class="customrt-center"> <span class="rt-icon"><span class="icon-sun title"></span></span> <h1 class="title rt-capitalize">Alle Farben</h1> <p>CSS Slider benutzt keine Bilder für das Design, also können die Skin-Farben einfach geändert warden. </p> </div> </div> </div> </div> </div> <div class="rt-grid-3 rt-alpha"> <div class="rt-block rt-center"> <div class="module-surround"> <div class="module-content"> <div class="customrt-center"> <span class="rt-icon"><span class="icon-external-link title"></span></span> <h1 class="title rt-capitalize">Responsive slider</h1> <p>Der Responsive slider past perfekt in Ihre Seite, egal welche Bildschirm-Größe. </p> </div> </div> </div> </div> <div class="rt-block rt-center"> <div class="module-surround"> <div class="module-content"> <div class="customrt-center"> <span class="rt-icon"><span class="icon-flag-checkered title"></span></span> <h1 class="title rt-capitalize">Kein Coding</h1> <p>Erstellen Sie Ihren Slider in Sekunden mit dem Visuellen-Ersteller</p> </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>Slider ohne jQuery?</span></h2> </div> <div class="module-content"> <div class="customfp-feature rt-center rt-big-title"> <div class="gantry-width-80 gantry-width-block rt-center rt-margin-auto"> <p>Heutzutage wirkt es so, als ob die Leute in Image Slider verliebt sind. Sie sind überall. Und sicher, Sie können viele Image-Slider finden die Sie einige Fotos und Videos auf Ihrer Website anzeigen lassen können, aber diese benötigen alle viel jQuery und Javascript code. Warum die schweren und überladenen Bibliotheken mit sich herumschleppen, wenn alles mit sauberem und leichtem CSS erledigt warden kann? CSS Slider ist der einzige pure CSS Slider der eine combination aus genialen CSS3 effekten, vorgefertigeten Skins, Icon Schriftarten, Voll funktionsfähigen Navigationen und Code-Loser Slider generation anbietet. </p> </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-play"></span><span>Beeindruckende Übergänge</span></h2> <p>cssSlider bietet beeindruckende Hardware-Beschleunigte pure CSS Übergänge um Ihre Nutzer zu beeindrucken und Ihnen zu helfen, dass die Nutzer auf der Seite bleiben. </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>Wunderschöne Slider-Themes</span></h2> <p>Sie warden nicht nur einen Look mit cssSlider haben. Dieser unglaublicher Slider kommt mit einem Eingebauten Thema/Farbe/Effekt Auswähler der es Ihnen ermöglicht von genialen vorgefertigten Themen auszuwählen die inkludiert sind! </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 basiert ausschließlich auf CSS (kein Flash, kein jQuery, kein Javascript), desshalb wird es in jedem Brwoser, ohne extra Plugins, laufen. </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>Ihre Nutzer besuchen Ihre Seite nicht nur vom komfortablen Desktop. Mit einem responsive Design, kann der cssSlider auf allen Geräten großartig aussehen, out of the box. </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 Vorschau</span></h2> <p>Sehen Sie sofort die Veränderung Ihres Sliders und alle Änderungen die Sie machen im Live-Vorschau Bereich. </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>Die prev/next Pfeile und alle Anderen Controlls des Sliders bestehen aus einer Icon-Schrift, dadurch sind Sie Auflösungs-Unabhängig und perfekt für Retina 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-magic"></span><span>Einfach zu verwenden</span></h2> <p>Einfach zu verwenden, Sie wenden einfach verschiedene Skins, Farben und Effekte aus der Bibliothek auf Ihren Slider an. Es ist absolut kein Wissen über Programmieren notwendig. Sie warden keine einzige Zeile Code schreiben müssen!</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>Mit mehr und mehr Nutzern die Ihre Seiten auf Mobilen Geräten browsen, ist es kritisch, dass Ihre Seite auf Smartphones und Tablets gut ausschaut und funktioniert. cssSlider adjustiert die Größe automatisch am Destop und auf Mobilen Geräten, basierend auf der Fenstegröße. </p> </div> </div> <div class="gantry-width-33 gantry-width-block rt-left"> <div class="gantry-width-spacer"> <h2><span class="title-icon icon-gear"></span><span>Stark anpassbar</span></h2> <p>Sie können cssSlider in zwei verschiedenen Modi laufen lassen: Basic und Advanced. Wählen Sie aus einer großen Anzahl von built-in Layout-Styles um die Dinge wirklich einfach zu halten, oder passen Sie die Konfiguration an so wie Sie es wollen, damit Sie die volle Kontrolle bekommen.</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-crop"></span><span>Automatische Bild Zuschneidung und Dimensionierung</span></h2> <p>Sie warden nicht fünf verschiedene Fotobearbeitungsprogramme benötigen um Ihre Bilder Slider-Ready zu bekommen. Der cssSlider erledigt das Zuschneiden und die Dimensionierung für Sie!</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>Farb Kombinationen</span></h2> <p>Sie sind sich nicht sicher welche Farbe Sie mit Ihrem Slider verwenden wollen? Keine Sorgen, jede cssSlider Skin hat 6 ready-to-use Farb-Systeme um Ihre Entscheidung einfacher zu machen.</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> Met de indrukwekkende “drag and drop” feature kunt u snel slides toevoegen of verwijderen, of de volgorde aanpassen. U kunt het echt niet makkelijker hebben dan met cssSlider! </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-bug"></span><span>SEO freundlich</span></h2> <p>Weil der Slider mit purem HTML5 erstellt wurde, obwohl er super cool aussieht, können ihn Suchmaschinen trotzdem effizient crawlen. Das bedeutet, dass Sie Ihre Nutzer sowohl Nutzer als auch Suchmaschinen wie Google beeindrucken können, alles gleichzeitig!</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>Passen Sie Ihren Slider an</span></h2> <p>Es gibt Tonnen an Einstellungen die Sie bearbeitne können, unter anderem wunderschöne Übergang-Effekte und Farbenfrohe Flache Skins, prev/next Navigation, Kugeln mit Vorschau, autoplay, pause/stop, volle größe und andere Optionen. </p> </div> </div> <div class="gantry-width-33 gantry-width-block rt-left"> <div class="gantry-width-spacer"> <h2><span class="title-icon icon-cloud"></span><span>Leicht und kompatibel</span></h2> <p>Es wird kein Javascript verwendet um zu versichern, dass Ihre Seite schnell lädt, ohne auf den Slider warten zu müssen. Es ist auch designt umso kompatibel wie möglich zu sein, weil es die neuesten Standards verwendet. </p> </div> </div> </div> <div class="clear"></div>  <div class="rt-readon-row"> <a href="#download" class="readon rt-large-button download-button"><span class="icon-download-alt"></span> Gratis Download für Windows und Mac</a> </div>  <div class="clear"></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"> © 2014 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> <script type="text/javascript" src="../js/adjast-slider.js"></script> </body> </html>

CINXE.COM

Image-Slider ohne jQuery, nur mit CSS