I'm struggling with adding bxslider to my HTML template. No matter what I try, the slider doesn't work as expected. When I preview my website, all three images are displayed together in a single column. Can someone please guide me on how to fix this issue and get my slider working properly?
<link rel="stylesheet" href="css/style.css" media="screen" />
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,700" />
<link rel="stylesheet" href="css/flexslider.css" media="screen" />
<link rel="stylesheet" href="css/jquery.fancybox.css" media="screen" />
<link rel="stylesheet" href="css/jquery.bxslider.css" media="screen" />
<script type="text/javascript">
$(document).ready(function(){
$('.slider').bxSlider({
mode: 'fade',
captions: true,
auto: true,
autoControls: false
});
});
</script>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery-migrate-1.2.1.min.js"></script>
<script src="js/jquery.bxslider.js"></script>
<script src="js/jquery.ui.widget.min.js"></script>
<script src="js/jquery.ui.accordion.min.js"></script>
<script src="js/jquery.ui.tabs.min.js"></script>
<script src="js/jQuery.BlackAndWhite.min.js"></script>
<script src="js/jquery.easing-1.3.min.js"></script>
<script src="js/jquery.fitvid.js"></script>
<script src="js/jquery.fancybox.pack.js"></script>
<script src="js/jquery.flexslider-min.js"></script>
<script src="js/jquery.isotope.min.js"></script>
<script src="js/jquery.jcarousel.min.js"></script>
<script src="js/jquery.jtweetsanywhere-1.3.1.min.js"></script>
<script src="js/jquery.touchSwipe.min.js"></script>
<script src="js/jquery.zflickrfeed.min.js"></script>
<script src="js/respond.min.js"></script>
<script src="js/selectnav.min.js"></script>
<script src="js/custom.js"></script>
<script type="text/javascript" src="[JS library]"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
<script type="text/javascript" src="js/selectivizr-min.js"></script>
<noscript><link rel="stylesheet" href="[fallback css]" /></noscript>
<![endif]-->
</head>
<body>
<!-- Main Container -->
<div id="body-wrapper">
<!-- Header -->
<div id="header" class="container clearfix">
<a href="index.html" id="logo"><img src="images/logo.png" alt="" /></a>
<!-- Navigation -->
<ul id="navigation">
<li class="current">
<a href="index.html">Home</a>
</li>
...
</div>
Your assistance would mean a lot to me! Thank you in advance!