Jquery bxSlider not working failed to load resource

Question

I am trying to use jquery bxSlider (http://bxslider.com) with HTML 5. I followed instructions to download but I get "Failed to load resource not found on server" error when testing my page statically.

   <!DOCTYPE html>
<html>
<title>Tennis Central </title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-black.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">


<head>
<!-- jQuery library (served from Google) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/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" />

</head>

<script type="text/javascript">
  jQuery(document).ready(function(){
        jQuery('.slider1').bxSlider({
            slideWidth: 200,
            minSlides: 2,
            maxSlides: 3,
            slideMargin: 10
      });
  });    
</script>

Error Pic

what is the physical location of bxslider file. In project or referencing to cdn? — brk
It is in the same directory as my index.html file. Above is my index.html file. I know that my JQuery () function is not complete but I am more concerned about why it is not detecting the present file for bxslider — Roshan
For starters, your opening <head> tag is misplaced. It needs to go directly under your <html> tag. From there, try loading the boxSlider script and stylesheet from a cdn...cdnjs.com/libraries/bxslider — Rich