As a newcomer to jQuery, I have been experimenting with it to gain some experience. I recently tried to integrate a jQuery image slider from slidesjs.com into my local website but unfortunately, it is not functioning as expected.
Additionally, I would like to organize my code better. How can I link my jQuery page with the HTML if I decide to move all the jQuery code into a separate file?
Here is an example of what I have attempted:
<html>
<header>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery.slides.min.js"></script>
<link rel="stylesheet" type="text/css" href="style2.css"></header>
<style>
/* Prevents slides from flashing */
#slides {
display:none;
}
</style>
<script>
$(function(){
$("#slides").slidesjs({
width: 940,
height: 528
});
});
</script>
<body>
<div class="nav-bar">
<h1 class="logo" style="vertical-align:middle">LogoHere</h1>
<ul class="nav-menu">
<li><a href="index.html" class="action">Action</a></li>
<li><a href="about.html" class="about">Who we are</a></li>
<li><a href="blog.html" class="blog">Blog</a></li>
<li><a href="services.html" class="services">Services</a></li>
<li><a href="contact.html" class="contact">Get in touch</a></li>
</ul>
<div id="slides">
<img src="hkslide1.jpg">
<img src="hkslide2.jpeg">
<img src="hkslide3.jpg">
</div>
</div>