having trouble implementing this bxslider slider. first things first, the images are all visible? how do i make this look like an actual slider?
you can see the issue live here; .html
otherwise, i've done exactly what the website told me to =/
JS Script
<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis/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 src="bxslider.js" type="text/javascript"></script>
HTML
<ul class="bxslider">
<li><img src="images/Couple%20on%20Lounge%20Chair_Towneclub.jpg" /></li>
<li><img src="images/Man%20on%20Bench_Towneclub.jpg" /></li>
<li><img src="images/Picnic%20Couple_Towneclub.jpg" /></li>
<li><img src="images/Small%20Golf_Towneclub.jpg" /></li>
</ul>
CSS
.bxslider{
height:600px;
width:auto;
background-color:#c41230;
/*background-image: url(images/imagescroll_1.png);*/
background-size:cover;
position:relative;
top:95px;
}
JS file
$(document).ready(function(){
$('.bxslider').bxSlider();
});
I am an amateur, but all help is very appreciated. Thanks in advance.
having trouble implementing this bxslider slider. first things first, the images are all visible? how do i make this look like an actual slider?
you can see the issue live here; http://danielmdesigns./windermere/index.html
otherwise, i've done exactly what the website told me to =/
JS Script
<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis./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 src="bxslider.js" type="text/javascript"></script>
HTML
<ul class="bxslider">
<li><img src="images/Couple%20on%20Lounge%20Chair_Towneclub.jpg" /></li>
<li><img src="images/Man%20on%20Bench_Towneclub.jpg" /></li>
<li><img src="images/Picnic%20Couple_Towneclub.jpg" /></li>
<li><img src="images/Small%20Golf_Towneclub.jpg" /></li>
</ul>
CSS
.bxslider{
height:600px;
width:auto;
background-color:#c41230;
/*background-image: url(images/imagescroll_1.png);*/
background-size:cover;
position:relative;
top:95px;
}
JS file
$(document).ready(function(){
$('.bxslider').bxSlider();
});
I am an amateur, but all help is very appreciated. Thanks in advance.
Share Improve this question asked Apr 18, 2014 at 1:04 Danny M.Danny M. 1503 gold badges3 silver badges18 bronze badges 7- I looked at your page, and couldn't find the call to .bxSlider in script tags above the </body>. Did I miss something? – TimSPQR Commented Apr 18, 2014 at 2:02
- @TimSPQR, i noticed it is in head tag. However, reference to "/js/jquery.bxslider.min.js" is going to a 404 – Varinder Commented Apr 18, 2014 at 2:03
- Then there is the problem. You need to download the.js file to your server and make sure the link in the header is pointing to the right file. – TimSPQR Commented Apr 18, 2014 at 2:09
- thanks a bunch @TimSPQRj - i noticed a few mistakes, including what you stated, and corrected those. however, i still see no change. any chance you could take another look? – Danny M. Commented Apr 18, 2014 at 2:37
- Ok, I might see the problem. Take your JS text above out of the js file, and put it in a document ready function above your </body> tag. – TimSPQR Commented Apr 18, 2014 at 3:03
2 Answers
Reset to default 1You should also add a type to the script like so:
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider();
});
</script>
Ok, I simplified your entire page, and changed the images, uploaded this file to my website and it works fine. So your problem is probably in the way you are calling the files in the head, and the lack of the bxSlider function in the script above the </body> tag.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>testslider</title>
<link rel="stylesheet" href="http://code.jquery./ui/1.10.3/themes/smoothness/jquery-ui.css"/>
<script type="text/javascript" src="http://code.jquery./jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery./ui/1.10.3/jquery-ui.js"></script>
<script src="jquery.bxslider.js"></script>
<link href="jquery.bxslider.css" rel="stylesheet" />
<style>
.bxslider {
height: 600px;
width: auto;
background-color: #c41230;
background-size: cover;
position: relative;
border: 1px solid red;
}
</style>
</head>
<body>
<ul class="bxslider">
<li><img src='http://img4.wikia.nocookie/__cb20130627150007/disney/images/a/aa/Goofy-11.jpg' /></li>
<li><img src="https://www.irononsticker./images/2012/09/05/Pluto%20Mickey.jpg" /></li>
<li><img src="http://www.getcartoonwallpaper./wp-content/uploads/2013/12/Minnie-Mouse-4.jpg" /></li>
<li><img src="https://dliq60eur0hds.cloudfront/wp-content/uploads/2013/03/yosemite-perfect-3-days-half-dome.jpg" /></li>
</ul>
<script>
$(document).ready(function(){
$('.bxslider').bxSlider();
});
</script>
</body>
</html>