CODEWITHSUNDEEP
jquerycss
factordog
factordog

Reputation: 597

bxslider wont work correctly

Been having a problem on getting bxSlider to work. I went wrong I imagine around the last step--in calling the bxSlider. Everything is linked from the same folder.

Fiddle

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<!-- 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="jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->

<link href="jquery.bxslider.css" rel="stylesheet" />
<script type="text/javascript">
  jQuery(document).ready(function(){
        jQuery('.bxslider').bxSlider({
            slideWidth: 200,
            minSlides: 2,
            maxSlides: 3,
            slideMargin: 10
      });
  });    
</script>
</head>

<body>
<ul class="bxslider">
  <li><img src="../Luke Portfolio 2 - rough_idea/factormedia.co.za/images/fader1.png" /></li>
  <li><img src="../Luke Portfolio 2 - rough_idea/factormedia.co.za/images/fader2.png" /></li>
</ul>
</body>
</html>

Upvotes: 0

Views: 997

Answers (4)

disinfor
disinfor

Reputation: 11558

You can use jQuery 1.8.3.

There were a few problems with your code. Here's the working fiddle: http://jsfiddle.net/fq23j3sr/7/

In your JS, you were trying to initialize the bxSlider() function, BEFORE you actually loaded the plugin you were trying to reference. Simply moving:

// JavaScript Document
$(document).ready(function () {
    $('.bxslider').bxSlider();
});

Below the plugin code will solve the issue of the undefined function error.

Hope this helps.

EDIT: auto start - as asked in the comments:

$(document).ready(function () {
    $('.wrapper').bxSlider({
        'auto' : true,
        'autoStart' : true
    });
});

Upvotes: 1

zer00ne
zer00ne

Reputation: 44086

There were several issues that were fundamental to the operation of your Fiddle. Here's a fork of the original.

  • The urls to the images were relative not absolute. The urls also had spaces in them as well.

    • WRONG ../Luke Portfolio 2 - rough_idea/factormedia.co.za/images/fader1.png

    • CORRECT http://www.example.com/Luke%20Portfolio%202%20-%20rough_idea/factormedia.co.za/images/fader1.png

  • When using jsFiddle, you should use the rightside panel to enter urls to external files.

    • jquery.bxslider.min.js, and jquery.bxslider.css should be uploaded to your own website or you should use a CDN. Then you need to use the url instead of pasting the code in the editing panels.

`

Upvotes: 1

KDot
KDot

Reputation: 506

Do you see any errors in your console? The way you are enqueuing bxslider assumes that you have the file downloaded, and in the same directory as your index.html: 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
// This assumes you jquery.bxslider.min.js is in the same folder as the file that loads this page. 
<script src="jquery.bxslider.min.js"></script>

Edit:

Okay, sounds like you have a few errors to fix. The first, being jQuery not being defined. You need to add http to the beginning of your jQuery path, or else it is looking at the file:// protocol, which means it is looking locally on your own machine, as opposed to the URL that is hosting the jQuery library you are trying to load: 

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

That should solve your "$ is not defined" error.

Secondly, you need to download the jquery.bxslider.min.js file, and put it in the appropriate directory. The way you have it now, it is looking in the same directory as the file that loads your page (index.html, for example). You can either put it there, or you can create a new directory (for better organization), and put it there. I would recommend creating a folder called "js".

To download it, you can just copy the text from this link:

https://raw.githubusercontent.com/stevenwanderski/bxslider-4/master/dist/jquery.bxslider.min.js

and save it into a file called jquery.bxslider.min.js, either on the same level as your index.html, or in a js folder, and update your script src accordingly: 

<script src="js/jquery.bxslider.min.js"></script>

Upvotes: 1

sticksu
sticksu

Reputation: 3738

Your fiddle has a little messed up, so i created my own. Here is a working example: http://jsfiddle.net/jbLm2spv/ I think the problem in your code is that you use jQuery 1.8.2, which might be too old for bxSlider. Use a newer jQuery version, like 2.1.3 instead.

The html markup:

<ul class="bxslider">
  <li><img src="https://placeholdit.imgix.net/~text?txtsize=47&bg=000&txtclr=fff&txt=500%C3%97300&w=500&h=300" /></li>
  <li><img src="https://placeholdit.imgix.net/~text?txtsize=47&bg=ccc&txtclr=fff&txt=500%C3%97300&w=500&h=300" /></li>
    <li><img src="https://placeholdit.imgix.net/~text?txtsize=47&bg=000&txtclr=fff&txt=500%C3%97300&w=500&h=300" /></li>
  <li><img src="https://placeholdit.imgix.net/~text?txtsize=47&bg=ccc&txtclr=fff&txt=500%C3%97300&w=500&h=300" /></li>
</ul>

The js:

$('.bxslider').bxSlider({
            slideWidth: 200,
            minSlides: 2,
            maxSlides: 3,
            slideMargin: 10
});

Upvotes: 1

Related Questions