html - bxslider javascript install -
hi cannot bxslider work in html file, have downloaded files , put them relevant directories etc images displayed 1 after in block format when run page in firefox.
the code using follows:
<!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>ac</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="author" content="ac" /> <meta name="description" content="ac" /> <meta name="keywords" content="ac" /> <link href="./index.css" rel="stylesheet" type="text/css" /> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script src="http://bxslider.com/lib/jquery.bxslider.js"></script> <link href="http://bxslider.com/lib/jquery.bxslider.css" rel="stylesheet" /> </head> <body> <ul class="bxslider"> <li><img src="images/pic1.jpg" title="an energy conservation company"></li> <li><img src="images/pic2.jpg" title="designers , manufactors of quality lighting controls"></li> <li><img src="images/pic3.jpg" title="caption go here"></li> </ul> <script type="text/javascript">$(document).ready(function(){ $('.bxslider').bxslider(); }); mode: fade, captions: true, auto: true, autocontrols: false }); }); </script> <div id="header"> <div id="headerleft"><a href="./index.html"><img src="./images/mainlogo.jpg" alt="ac"/></div> <div id="headerright"> <div id="userbar">userbar</div> <div id="socialbar">socialbar</div> <div id="basket">basket</div> </div> </div> <div id="navmenu"> <ul> <li><a href="./index.html">home</a></li> <li><a href="./girls.html">girls</a></li> <li><a href="./boys.html">boys</a></li> <li><a href="./unisex.html">unisex</a></li> <li><a href="./accessories.html">accessories</a></li> </ul> </div> <div id="content"> <div id="gallery"> </div> <div id="offers">offers</div> </div> <div id="footer"> <div id="cards">maestro visa</div> </div> </body> </html>
there's error in script. try:
$(document).ready(function(){ $('.bxslider').bxslider({ mode: fade, captions: true, auto: true, autocontrols: false }); })
Comments
Post a Comment