0

我已经从@jacksbox 下载了Fraction Slider，并且现在已经无数次浏览了文档，并且无法弄清楚为什么我的滑块不会显示它应该显示的效果。这是我正在处理的网站：http: //pacificdesignacademy.com/NEW/2，这是滑块应该做什么的示例：http: //jacksbox.de/stuff/jquery-fractionslider/。

这是我的 js 的路径：../NEW/2/fractionslider/jquery.fractionslider.js

这是我的css的路径../NEW/2/fractionslider/fractionslider.css

无论我定义溢出：隐藏在包含元素上，所有图像都只是堆叠在一起。

不知道在这里还能做什么，所以非常感谢任何帮助。我应该在 9 月 1 日推出这个网站……哎呀！

谢谢！

4

3 回答 3

5

浏览器控制台中的一个简单检查显示您在页面的第 594 行有一个语法错误。你有一个右括号而不是一个左大括号。

更新修复后，您现在收到错误消息：

未捕获的 ReferenceError：未定义 jQuery

我建议您在包含 jQuery 和滑块插件之后移动代码并放置它，因此您的页面应该如下所示：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="fractionslider/jquery.fractionslider.js"></script>

<script type="text/javascript">
jQuery(window).load(function(){
    $('.slider').fractionSlider({
    'fullWidth':            true,
    'controls':             true, 
    'pager':                true,
    'responsive':           true,
    'dimensions':           "1200,400",
    'increase':             false,
    'pauseOnHover':         true
    });
});
</script>
于 2013-08-19T20:14:25.160 回答
0

调用插件时缺少左括号。

改变

$('.slider').fractionSlider()

至

$('.slider').fractionSlider({

在线 593

于 2013-08-19T20:24:18.053 回答
-1

FractionSlider 太垃圾了！改用LiquidSlider！一个没有但存在于另一个：

  • 格式良好的面向对象代码，
  • 如果浏览器支持，则使用新的 CSS3 转换自动硬件加速（这里没有 js 动画！），
  • 键盘导航，
  • 哈希链接，用户可以在其中为特定幻灯片添加书签或登陆到打开滑块到特定幻灯片的页面，
  • 很多效果，
  • 移动“交换”支持
  • 用户可扩展。

当然，它使用了一些其他库和代码片段从这里和那里“窃取”（https://hacks.mozilla.org/2011/09/detecting-and-generating-css-animations-in-javascript/但实际上它是多余的因为在响应式设计中使用 Moderniz 库使得检测像一行命令一样简单，http ://easings.net/用于缓动方程，https://daneden.me/animate/用于转换等）

FractionSlider 背后的想法确实很独特，但实现起来很糟糕！

于 2013-11-11T10:15:11.480 回答