Why isn't any jQuery based content slider working for me? (bxSlider, commas in js)
I've been trying to enable a jQuery content slider on my website for a long time, but I haven't been able to get any to work. Here is the relevant bit of code in the php webpage:
<ul class="bxSlider">
<?php
$poemquery = mysql_query("SELECT * FROM Act1Poems ORDER BY id asc") or die(mysql_error());
$currentElement = 0;
$totalElements = 0;
while($poem = mysql_fetch_array($poemquery)) {
echo '<li class="poem">';
echo $poem['Poem'];
echo '</li>';
$totalElements++;
}
$currentElement = $poem['ID'];
?>
</ul>
Note that it pulls in paragraphs from MySQL database to add content slides to bxSlider. And yet I get this result:
These are two table entries on top of each other, in normal unordered list order. Therefore it does not apply the actual slider.
To be sure, I tried a regular list instead of the fancy mysql stuff. Out of luck: either:
It's not just BxSlider. LightSlider and (I think) Jssor Slider didn't work for me either. What was happening pretty consistently was the error:
This error shows up as an "unexpected token", half the time and most of the time, destroys my javascript completely. And it shows up every time I use commas in my javascript code for some crazy reason, which means I only use:
$('.bxslider').bxslider();
This is fine, except that it doesn't allow me to customize the slider (it doesn't work with it anymore). Even LightSlider requires the same thing:
var slider = $('#publicMethods').lightSlider({
slideMargin:4,
slideWidth:200,
loop:false
});
I've tried both of these sliders with and without their included css files.
So what the hell?
Sorry, my first question is so vague here. I hope its scale is not huge. This is my first major web project. But if it helps, I added the source code of the whole project without database information to the referenced txt via pastebin.
The end goal is for it to only show one paragraph at a time, and so that the user can click buttons or scroll to read each paragraph in order from the table.
Pastebin 1 (PHP / HTML): http://pastebin.com/6uY77hC2
Pastebin 2 (CSS): http://pastebin.com/jh9AFLpJ
Pastebin 3 (JS): http://pastebin.com/TPXbBZR6
source to share
There is a typo in your selector name, html class = "bxSlider" (S is caps) in the class name, but in Js you are using $ ('. Bxslider') (s is small), which is why your JS is not selecting the element correctly, and your slider is not being created.
Also note that the function name is bxSlider (), not bxslider () (typo again).
Updated JS script and its working http://jsfiddle.net/c1kqeLt4/3/
$('.bxSlider').bxSlider({
adaptiveHeight: true,
minSlides: 1,
maxSlides: 1,
slideWidth: 100
});
For the css part, it doesn't work, because Bxslider adds style 'float:left'
in <li>
, so the ul height becomes zero. Give a background on <li>
and it will work.
Updated JS script demo: http://jsfiddle.net/c1kqeLt4/7
source to share