bxslider not working

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="/assets/js/bxslider/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="/assets/css/bxslider/jquery.bxslider.css" rel="stylesheet" />
<script>
$(document).ready(function(){
  $('.bxslider').bxslider();
});
</script>

<script>
	$(document).ready(function(){
		$('.bxslider').bxSlider({
			mode: 'fade',  // fade, horizontal, vertical
			speed: 500,
			randomStart: false,
			infiniteLoop: true,
			useCSS: true,
			touchEnabled: true,
			pager: false,
			controls: false,
			auto: true,
			pause: 5000,
			responsive: true
		});
	});
</script>

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	
	<title>[[++site_name]] - [[*pagetitle]]</title>
	<base href="[[++site_url]]" />
	
	<meta name="description" content="[[*description]]"/>
	<meta name="keywords" content="[[*introtext]]"/>

	<!--[if lt IE 9]> <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
	<!-- viewport checks-->
	
	<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0" />	
    
	<link rel="stylesheet" type="text/css" href="assets/css/reset.css" />
	
	<link rel="stylesheet" type="text/css" href="assets/css/style.css" />
	<!--image slider links-->
		
<!-- jQuery library (served from Google) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="assets/js/bxslider/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="assets/css/bxslider/jquery.bxslider.css" rel="stylesheet" />
<script>$(document).ready(function(){
  $('.bxslider').bxSlider();
});
    </script>
 	
 	<!--full screen script for home page-->
	
	<script src="assets/js/fullheight.js"></script>
	
	<!--navigation code-->
	
	<link rel="stylesheet" href="assets/js/menu/dist/slicknav.css">
	
	<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
	
	<!--favicon-->
	
	<link rel="shortcut icon" href="assets/images/favicon.ico"/>
	
	<!--Google analytics script-->
	
	<script>
		(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
			(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
			m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  			})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

			ga('create', 'UA-59969111-2', 'auto');
			ga('send', 'pageview');
	</script>

</head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="assets/js/menu/dist/jquery.slicknav.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('#menu').slicknav();
});
</script>  

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

[
{"caption":"Images", "fields": [
    {"field":"image","caption":"Slider image","inputTVtype":"image"}
]}
] 

[
{"header": "Image", "width": "200", "sortable": "true", "dataIndex": "image","renderer": "this.renderImage"}
]

<li>
<img src="[[+image]]" alt="image name" />
</li>

<div id="carousel-container">
<ul class="bxslider">
[[!getImageList? 
&tvname=`imageSlider`
&tpl=`imageSliderItem`]]
</ul>
</div>