为什么一个基于JQuery的内容滑块不适合我？(Why doesn't a single JQuery

为什么一个基于JQuery的内容滑块不适合我？(Why doesn't a single JQuery-based content slider work for me? (bxSlider, commas in js))

我一直在尝试在我的网站上整合基于JQuery的内容滑块很长一段时间，但我还没有能够让一个人工作。 这是网页php中的相关代码：

<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>

请注意，它从MySQL数据库中提取段落以将内容幻灯片添加到bxSlider。 然而，我得到了这个结果：

这是表格的两个条目，以正常的无序列表的形式放在一起。 所以它没有应用实际的滑块。

只是为了确定，我尝试了一个常规列表，而不是花哨的mysql东西。 那里没有运气，或者：

它不仅仅是BxSlider。 LightSlider和（我认为）Jssor Slider也没有为我工作。 发生的事情非常一致是这个错误：

这个错误表现为“意外的令牌”，一半的时间，大部分时间，完全打破我的JavaScript。 每当我在我的javascript代码中使用逗号时出现一些疯狂的原因，这意味着它只适用于我使用：

$('.bxslider').bxslider();

哪个没关系，除了那个让我自定义滑块（以及它已经无法开始工作）。 即使是lightSlider也需要同样的东西：

var slider = $('#publicMethods').lightSlider({ slideMargin:4, slideWidth:200, loop:false });

我试过这些滑块有和没有它们包含的css文件。

那么，到底是什么？

对不起，我在这里的第一个问题是如此模糊。 我希望它的范围不大。 这是我的第一个主要网络项目。 但如果它有帮助，我已经通过pastebin将整个项目的源代码没有数据库信息添加到引用txt。

最终目标是它一次只显示一个段落，并且用户能够单击按钮或滑动以从表中按顺序读取每个段落。

Pastebin 1（PHP / HTML）： http ： //pastebin.com/6uY77hC2 Pastebin 2（CSS）： http ： //pastebin.com/jh9AFLpJ Pastebin 3（JS）： http ： //pastebin.com/TPXbBZR6

I've been trying to incorporate a JQuery-based content slider on my website for a long time now, but I haven't been able to get a single one to work. Here is the relevant bit of code in the webpage's php:

<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>

Notice that it pulls paragraphs from a MySQL database to add content slides to the bxSlider. And yet, I get this result:

That is the two entries of the table laid on top of one another, in the fashion of a normal unordered list. So it's not applying the actual slider.

Just to be sure, I tried a regular list instead of having fancy mysql stuff. No luck there, either:

It's not just BxSlider. LightSlider and (I think) Jssor Slider haven't worked for me either. Something that's been happening pretty consistently is this error:

That error manifests itself as "unexpected token ," half the time, and most of the time, completely breaks my javascript. And it comes up every time I use commas in my javascript code for some crazy reason, which means it's only okay with me using:

$('.bxslider').bxslider();

Which is okay, except that that doesn't let me customize the slider(along with it already not working to begin with). Even lightSlider demands the same thing:

var slider = $('#publicMethods').lightSlider({ slideMargin:4, slideWidth:200, loop:false });

I've tried both these sliders with and without their included css files.

So, what the heck?

Sorry that my first question here is so vague. I hope the scope of it isn't huge. This is my first major web project. But if it helps, I've added the sourcecode of the entire project sans database info to the reference txt by way of pastebin.

The ultimate goal is for it to show only one paragraph at a time, and for the user to be able to click buttons or swipe 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

最满意答案

你的选择器名称中有一个拼写错误，在html类名中是class =“bxSlider”（S是大写）但在Js中你使用$（'。bxslider'）（s很小），这就是为什么在你的JS中它是没有正确选择元素，并且未创建滑块。

另请注意，函数名称是bxSlider（）而不是bxslider（）（同样是拼写错误）。

更新了您的JS小提琴及其现在的工作http://jsfiddle.net/c1kqeLt4/3/

$('.bxSlider').bxSlider({ adaptiveHeight: true, minSlides: 1, maxSlides: 1, slideWidth: 100 });

对于css部分，它不起作用，因为Bxslider在<li>上添加style 'float:left' ，因此ul的高度变为零。 给出<li>背景，它会起作用。

更新了JS小提琴演示： http ： //jsfiddle.net/c1kqeLt4/7

There is a typo in your selector name , in html class name is class="bxSlider" (S is caps) but in Js you are using $('.bxslider') (s is small) , thats why in your JS it is not selecting the element correctly and your slider is not created.

Also note, the function name is bxSlider() not bxslider() (again typo).

Updated your JS fiddle and its working now http://jsfiddle.net/c1kqeLt4/3/

$('.bxSlider').bxSlider({ adaptiveHeight: true, minSlides: 1, maxSlides: 1, slideWidth: 100 });

For css part, it is not working because Bxslider adds style 'float:left' on <li>, so height of ul becomes zero. Give background on <li> and it will work.

Updated JS fiddle demo: http://jsfiddle.net/c1kqeLt4/7