html - Slight issue with my jQuery image slider -
i (and have been several hours) trying image slider on page attempting make. burnt out. need help. below page source. guessing mixup within there , not js or css. or maybe there many referenced style sheets? or order things in? have literally copied , pasted code tutorial site , still cannot, life of me, figure out why won't run. please need help.
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0"> <title>outer limit media solutions</title> <link rel="stylesheet" href="bjqs.css"> <link href='http://fonts.googleapis.com/css?family=source+code+pro|open+sans:300' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="demo.css"> <link rel="stylesheet" href="css/standardize.css"> <link rel="stylesheet" href="css/index-grid.css"> <link rel="stylesheet" href="css/index.css"> <!-- load jquery , plugin --> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="js/bjqs-1.3.min.js"></script> </head> <body class="body index clearfix"> <div class="container _container container-1 clearfix"> <div class="element element-1"></div> <header class="_container clearfix"> <img class="outer-limit-logo" src="img/outer-limit-logo-improv.svg"> <div class="contact">contact</div> <div class="the-work">work</div> <div class="about">about </div> </header> </div> <div id="container"> <!-- outer wrapper presentation only, can --> <div id="banner-slide"> <!-- start basic jquery slider --> <ul class="bjqs"> <li><a href=""><img src="img/banner01.jpg" title="automatically generated caption"></a></li> <li><img src="img/banner02.jpg" title="automatically generated caption"></li> <li><img src="img/banner03.jpg" title="automatically generated caption"></li> </ul> <!-- end basic jquery slider --> </div> <!-- end outer wrapper --> <!-- attach plug-in slider parent element , adjust settings required --> <script class="secret-source"> jquery(document).ready(function($) { $('#banner-slide').bjqs({ animtype : 'slide', height : 320, width : 620, responsive : true, randomstart : true }); }); </script> </div> <div class="divider"></div> <div class="container _container container-2 clearfix"> <div class="element element-2"></div> <div class="element element-3"></div> <div class="element element-4"></div> <div class="element element-5"></div> <div class="element element-6"></div> <div class="element element-7"></div> <div class="element element-8"></div> <div class="element element-9"></div> <div class="element element-10"></div> <div class="element element-11"></div> <div class="element element-12"></div> <div class="element element-13"></div> </div> <footer class="_container _container-4 clearfix"> <p class="text text-1">outer limit media solutions</p> <p onclick="window.location='mailto: info@outerlimitkw.com';" class="text text-2">info@outerlimitkw.com</p> <p class="text text-3">mazaya tower #1, 12th floor</p> <p class="text text-4">khalid bin al waleed st.</p> <p class="text text-5">al murgab, kuwait</p> <div class="container _container container-3 clearfix"> <img class="facebook-outer-limit" src="img/facebook-outer-limit.svg"> <img class="instagram-outer-limit" src="img/instagram-outer-limit.svg"> <img class="linkedin-outer-limit" src="img/linkedin-outer-limit.svg"> <img class="twitter-outer-limit" src="img/twitter-outer-limit.svg"> <img class="google-plus-outer-limit" src="img/google-plus-outer-limitt.svg"> </div> </footer> </body> </html>
what's tuto following?, check , compare work. little advice, try make order , keep it. images put directory (eg. "/images"), same stylesheets (eg. "/css"), , other stuff.
when make sure it's in right place, check every reference made on html, try put every css in fewer files, if it's not absolutely necessary separate it.
when you're done, suggest check step, achieve lower goals each find/debug went wrong.
i have guess, check if demo.css should be. , script, believe there's no class property element (http://www.w3schools.com/tags/tag_script.asp class property apparently doesn't exists tag), try deleting , replacing type="text/javascript" , move bottom of file...
hope helps!
ps: remainder!, if reference 1 folder in same level, make sure add dots before slash (../), because need access parent level access other folder. same applies if have several levels of folders repeat dots , slash many times need, dude, don't abuse it. less levels it's better, keep simple , modulated.
Comments
Post a Comment