ich möchte den Slider von FlexSlider in meine Homepage einfügen, doch wenn ich es so nach diesem Tutorial hier mache, dann funktioniert es nicht:
Hier mein HTML Code:
HTML Code:
<!DOCTYPE HTML> <!-- Dopetrope by HTML5 UP html5up.net | @n33co Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) --> <html> <head> <title>CREATIVEFX</title> <link href="themes/1/js-image-slider.css" rel="stylesheet" type="text/css" /> <script src="themes/1/js-image-slider.js" type="text/javascript"></script> <script src="js/jquery.flexslider-min.js" type="text/javascript"></script> <link href="generic.css" rel="stylesheet" type="text/css" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]--> <script src="js/jquery.min.js"></script> <script src="js/jquery.dropotron.min.js"></script> <script src="js/skel.min.js"></script> <script src="js/skel-layers.min.js"></script> <script src="js/init.js"></script> <noscript> <link rel="stylesheet" href="css/skel.css" /> <link rel="stylesheet" href="css/style.css" /> <link rel="stylesheet" href="css/style-desktop.css" /> </noscript> <!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]--> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"> <link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" /> <script src="js/modernizr.js"></script> </head> <body class="homepage" class="loading"> <!-- Header --> <div id="header-wrapper"> <div id="header"> <!-- Logo --> <h1><a href="index.html">CreativeFX</a></h1> <!-- Nav --> <nav id="nav"> <ul> <li class="current"><a href="index.html">Start</a></li> <li> <a href="mich.html">Über Mich</a> </li> <li><a href="portfolio.html">Portfolio</a></li> <li><a href="shop.html">Shop</a></li> <li><a href="kontakt.html">Kontakt</a></li> </ul> </nav> <!-- Banner --> <div id="container" class="cf"> <div id="main" role="main"> <section class="slider"> <div class="flexslider"> <ul class="slides"> <li> <img src="images/kitchen_adventurer_cheesecake_brownie.jpg" /> </li> <li> <img src="images/kitchen_adventurer_lemon.jpg" /> </li> <li> <img src="images/kitchen_adventurer_donut.jpg" /> </li> <li> <img src="images/kitchen_adventurer_caramel.jpg" /> </li> </ul> </div> </section> </div> </div> <!-- jQuery --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.min.js">\x3C/script>')</script> <!-- FlexSlider --> <script defer src="../jquery.flexslider.js"></script> <script type="text/javascript"> $(function(){ SyntaxHighlighter.all(); }); $(window).load(function(){ $('.flexslider').flexslider({ animation: "slide", start: function(slider){ $('body').removeClass('loading'); } }); }); </script> <!-- Syntax Highlighter --> <script type="text/javascript" src="js/shCore.js"></script> <script type="text/javascript" src="js/shBrushXml.js"></script> <script type="text/javascript" src="js/shBrushJScript.js"></script> <!-- Optional FlexSlider Additions --> <script src="js/jquery.easing.js"></script> <script src="js/jquery.mousewheel.js"></script> <script defer src="js/demo.js"></script> <!-- Content --> <article class="box post"> <header> <h2>No Sidebar</h2> <p>Lorem ipsum dolor sit amet feugiat</p> </header> <p> Vestibulum scelerisque ultricies libero id hendrerit. Vivamus malesuada quam faucibus ante dignissim auctor hendrerit libero placerat. Nulla facilisi. Proin aliquam felis non arcu molestie at accumsan turpis commodo. Proin elementum, nibh non egestas sodales, augue quam aliquet est, id egestas diam justo adipiscing ante. Pellentesque tempus nulla non urna eleifend ut ultrices nisi faucibus. Vestibulum scelerisque ultricies libero id hendrerit. Vivamus malesuada quam faucibus ante dignissim auctor hendrerit libero placerat. Nulla facilisi. Proin aliquam felis non arcu molestie at accumsan turpis commodo. Proin elementum, nibh non egestas sodales, augue quam aliquet est, id egestas diam justo adipiscing ante. </p> <header> <h2>No Sidebar</h2> <p>Lorem ipsum dolor sit amet feugiat</p> </header> <p> Vestibulum scelerisque ultricies libero id hendrerit. Vivamus malesuada quam faucibus ante dignissim auctor hendrerit libero placerat. Nulla facilisi. Proin aliquam felis non arcu molestie at accumsan turpis commodo. Proin elementum, nibh non egestas sodales, augue quam aliquet est, id egestas diam justo adipiscing ante. Pellentesque tempus nulla non urna eleifend ut ultrices nisi faucibus. Vestibulum scelerisque ultricies libero id hendrerit. Vivamus malesuada quam faucibus ante dignissim auctor hendrerit libero placerat. Nulla facilisi. Proin aliquam felis non arcu molestie at accumsan turpis commodo. Proin elementum, nibh non egestas sodales, augue quam aliquet est, id egestas diam justo adipiscing ante. </p> </section> </article> <!-- Intro --> <section id="intro" class="container"> <div class="row"> <br/> <br/> <br/> <br/> </div> <footer> <ul class="actions"> <li><a href="#" class="button big">Anfrage senden</a></li> <li><a href="#" class="button alt big">Portfolio ansehen</a></li> </ul> </footer> </section> </div> </div> <!-- Copyright --> <div id="copyright"> <ul class="links"> <li>© Untitled. All rights reserved.</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li> </ul> </div> </div> </div> </section> </div> </body> </html>
General Coding -> Web Development
