Witajcie. Chcę dodać na swoją stronę przesuwaną galerię bazującą na jQuery. Dokładnie jest to:
http://bxslider.com/examples/manual-show-without-infinite-loop
Na stronie głównej podana jest instrukcja. Nie bardzo wiem, co mam zrobić z punktem 3cim, gdzie umieścić ten kod:
$(document).ready(function(){ $('.bxslider').bxSlider(); });
http://bxslider.com/
Tak wygląda mój index.html :
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Usługi Transportowe Andrzej Bielawski</title> <link rel="stylesheet" href="css/style.css"> <!-- jQuery library (served from Google) --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <!-- bxSlider Javascript file --> <script src="js/jquery.bxslider.min.js"></script> <!-- bxSlider CSS file --> <link href="lib/jquery.bxslider.css" rel="stylesheet" /> <script type="text/javascript"> $('.bxslider').bxSlider({ infiniteLoop: false, hideControlOnEnd: true }); </script> </head> <body oncontextmenu="return false" onselectstart="return false" onselect="return false" oncopy="return false" ondragstart="return false" ondrag="return false" onbeforeprint="document.body.style.visibility = 'hidden'; alert('Wydruk jest niedostępny!')" onafterprint="document.body.style.visibility = 'visible'"> <div id="wrappaer"></div> <div class="body"></div> <div class="top"> <div class="flag1"></div> <div class="flag2"></div> <div class="flag3"></div> <div class="butt"></div> </div> <div class="line"></div> <footer></footer> <ul class="bxslider"> <li><img src="images/fot1.jpg" /></li> <li><img src="images/fot2.jpg" /></li> <li><img src="images/fot3.jpg" /></li> </ul> </body> </html>
Plik jquery.bxslider.min.js mam w katalogu o nazwie "js", natomiast jquery.bxslider.css w "lib".
Zdjęcia wyświetlają mi się normalnie, a nie w sliderze.