Basic jQuery Slider not displaying at all

Question

I want to implement the slider on a page, but thought I would try the example on its own first. Nothing displays, at all. I have searched through the forms and made some slight changes, but still no avail. Below is the code:

<!doctype html>
<html>

<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">     </script>
<script src="jquerySlider/js/bjqs-1.3.js"></script>
<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
<link type="text/css" rel="Stylesheet" href="jquerySlider/bjqs.css" />

<style TYPE="text/css">
<!--
#my-slideshow {
background-color:#A3CF2E;
}
-->
</style>
</head>

<body>
<div id="my-slideshow">
    <ul class="bjqs">
        <li>first time for me</li>
        <li>second round of the game</li>
    </ul>
</div>
<script>
jQuery(document).ready(function($) {
$('#banner-fade').bjqs({
    'height' : 320,
    'width' : 620,
    'responsive' : true,
    'animtype' : 'fade', // accepts 'fade' or 'slide'
    'animduration' : 450, 
    'animspeed' : 4000, 
    'automatic' : true, 


        'showcontrols' : true, 
    'centercontrols' : true, 
    'nexttext' : 'Next', 
    'prevtext' : 'Prev', 
    'showmarkers' : true, 
    'centermarkers' : true, 


        'keyboardnav' : true, 
    'hoverpause' : true,


        'usecaptions' : true, 
    'randomstart' : true, 
});
});
</script>
</body>
</html>

Any errors in the console? Path to your plugin files correct? — j08691, Jan 21 '14 at 15:11
possible duplicate of [How can I debug my JavaScript code?](http://stackoverflow.com/questions/988363/how-can-i-debug-my-javascript-code) — Liam, Jan 21 '14 at 15:12
I get `Uncaught TypeError: Object [object Object] has no method 'bjqs' ` when I try it out. Are you perhaps missing a jQuery plugin? **Edit:** Looks like you're missing bjqs-1.3.js. Try double-checking that the path to the file is correct. — Zhihao, Jan 21 '14 at 15:12
@Zhihao. Of course you will get that error, since it's a reference to a local file! — Drumbeg, Jan 21 '14 at 15:50

JackArbiter · Answer 1 · 2014-01-21T15:47:48.013

Your div id should be banner-fade not my-slideshow. That or change $('#banner-fade').bjqs({ to $('#my-slideshow').bjqs({

'height' and 'width' and all the others should not have ' around them. Only fade, next, and prev should. Adding the ' basically comments out those lines.

<!doctype html>
<html>

<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">            </script>
<script src="jquerySlider/js/bjqs-1.3.js"></script>
<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
<link type="text/css" rel="Stylesheet" href="jquerySlider/bjqs.css" />

<style TYPE="text/css">
<!--
#my-slideshow {
background-color:#A3CF2E;
}
-->
</style>
</head>

<body>
<div id="my-slideshow">
    <ul class="bjqs">
        <li>first time for me</li>
        <li>second round of the game</li>
    </ul>
</div>
<script>
jQuery(document).ready(function($) {
$('#my-slideshow').bjqs({
    height : 320,
    width : 620,
    responsive : true,
    animtype : 'fade', // accepts 'fade' or 'slide'
    animduration : 450, 
    animspeed : 4000, 
    automatic : true, 


    showcontrols : true, 
    centercontrols : true, 
    nexttext : 'Next', 
    prevtext : 'Prev', 
    showmarkers : true, 
    centermarkers : true, 


    keyboardnav : true, 
    hoverpause : true,


    usecaptions : true, 
    randomstart : true, 
});
});
</script>
</body>
</html>

Basic jQuery Slider not displaying at all

1 Answers1