CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Danny M.
Danny M.

Reputation: 150

bxslider javascript slider not working

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.com/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.com/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.

Upvotes: 2

Views: 12174

Answers (2)

Patrick
Patrick

Reputation: 182

You should also add a type to the script like so:

<script type="text/javascript">
$(document).ready(function(){
    $('.bxslider').bxSlider();
});
</script>

Upvotes: 1

TimSPQR
TimSPQR

Reputation: 2984

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.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script type="text/javascript" src="http://code.jquery.com/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.net/__cb20130627150007/disney/images/a/aa/Goofy-11.jpg' /></li>
    <li><img src="https://www.irononsticker.com/images/2012/09/05/Pluto%20Mickey.jpg" /></li>
    <li><img src="http://www.getcartoonwallpaper.com/wp-content/uploads/2013/12/Minnie-Mouse-4.jpg" /></li>
    <li><img src="https://dliq60eur0hds.cloudfront.net/wp-content/uploads/2013/03/yosemite-perfect-3-days-half-dome.jpg" /></li>
  </ul>

<script>
$(document).ready(function(){
    $('.bxslider').bxSlider();
});
</script> 

</body>
</html>

Upvotes: 1

Related Questions