我正在尝试使用名为wmu slider的jquery滑块来工作。我已经从https://github.com/pastawoua/wmuSlider下载了文件和演示版,当我在本地打开demo.html时,一切正常,但是当我上传到我的网站时,没有任何内容加载,这里是网址http://www.klossal.com/wmuSlider/demo/demo.html
我多次查看过所有内容,网址都是正确的,我一直试图解决这个问题几个小时没有运气,任何帮助都会非常感激。
抱歉,如果链接不适合您,请输入以下代码:
HTML:
<!DOCTYPE html>
<!-- BEGIN html -->
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"><![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"><![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"><![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"><!--<![endif]-->
<!-- BEGIN head-->
<head>
<!-- Meta Tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-
scale=1.0">
<!-- Title -->
<title>wmuSlider Demo</title>
<!-- Stylesheets -->
<link rel="stylesheet" href="css/demo.css" type="text/css" media="screen" />
<script type="text/javascript" src="modernizr.custom.min.js"></script>
<script src="http://www.klossal.com/jquery-1.7.2.min.js"></script>
<script src="../jquery.wmuSlider.js"></script>
<script src="../jquery.wmuGallery.js"></script>
<script>
$('.example1').wmuSlider();
$('.example2').wmuSlider({
touch: true,
animation: 'slide'
});
$('.example3').wmuSlider({
touch: Modernizr.touch,
animation: 'slide',
items: 2
});
$('.example4').wmuGallery();
</script>
<!-- END head -->
</head>
<!-- BEGIN body -->
<body>
<!-- BEGIN .wmuSlider -->
<div class="wmuSlider example1">
<div class="wmuSliderWrapper">
<article>
<img src="http://www.klossal.com/media/boundarywaters/boundry-1.jpg" />
</article>
<article>
<img src="http://www.klossal.com/media/boundarywaters/boundry-2.jpg" />
</article>
<article>
<img src="http://www.klossal.com/media/boundarywaters/boundry-3.jpg" />
</article>
<article>
<img src="http://www.klossal.com/media/boundarywaters/boundry-4.jpg" />
</article>
<article>
<img src="http://www.klossal.com/media/boundarywaters/boundry-5.jpg" />
</article>
<article>
<img src="http://www.klossal.com/media/boundarywaters/boundry-6.jpg" />
</article>
</div>
<!-- END .wmuSlider -->
</div>
<!-- BEGIN .wmuSlider -->
<div class="wmuSlider example2">
<div class="wmuSliderWrapper">
<article>
<img src="http://farm7.static.flickr.com/6052/6279000273_218313c876.jpg" />
</article>
<article>
<img src="http://farm7.static.flickr.com/6104/6271856202_1e3ccb3deb.jpg" />
</article>
<article>
<img src="http://farm7.static.flickr.com/6053/6268322528_818ab33f7f.jpg" />
</article>
<article>
<img src="http://farm7.static.flickr.com/6232/6239597762_15491d4c97.jpg" />
</article>
<article>
<img src="http://farm7.static.flickr.com/6057/6224753006_9fb962d890.jpg" />
</article>
<article>
<img src="http://farm7.static.flickr.com/6036/6213397745_1d8f223e93.jpg" />
</article>
</div>
<!-- END .wmuSlider -->
</div>
<!-- BEGIN .wmuSlider -->
<div class="wmuSlider example3">
<div class="wmuSliderWrapper">
<article>
<img src="http://farm7.static.flickr.com/6052/6279000273_218313c876.jpg" />
</article>
<article>
<img src="http://farm7.static.flickr.com/6104/6271856202_1e3ccb3deb.jpg" />
</article>
<article>
<img src="http://farm7.static.flickr.com/6053/6268322528_818ab33f7f.jpg" />
</article>
<article>
<img src="http://farm7.static.flickr.com/6232/6239597762_15491d4c97.jpg" />
</article>
<article>
<img src="http://farm7.static.flickr.com/6057/6224753006_9fb962d890.jpg" />
</article>
<article>
<img src="http://farm7.static.flickr.com/6036/6213397745_1d8f223e93.jpg" />
</article>
</div>
<!-- END .wmuSlider -->
</div>
<!-- BEGIN .wmuGallery -->
<div class="wmuGallery example4">
<div class="wmuSlider">
<div class="wmuSliderWrapper">
<article>
<img width="75" height="75"
src="http://farm7.static.flickr.com/6052/6279000273_218313c876_s.jpg" data-src-
full="http://farm7.static.flickr.com/6052/6279000273_218313c876.jpg" />
</article>
<article>
<img width="75" height="75"
src="http://farm7.static.flickr.com/6104/6271856202_1e3ccb3deb_s.jpg" data-src-
full="http://farm7.static.flickr.com/6104/6271856202_1e3ccb3deb.jpg" />
</article>
<article>
<img width="75" height="75"
src="http://farm7.static.flickr.com/6053/6268322528_818ab33f7f_s.jpg" data-src-
full="http://farm7.static.flickr.com/6053/6268322528_818ab33f7f.jpg" />
</article>
<article>
<img width="75" height="75"
src="http://farm7.static.flickr.com/6232/6239597762_15491d4c97_s.jpg" data-src-
full="http://farm7.static.flickr.com/6232/6239597762_15491d4c97.jpg" />
</article>
<article>
<img width="75" height="75"
src="http://farm7.static.flickr.com/6057/6224753006_9fb962d890_s.jpg" data-src-
full="http://farm7.static.flickr.com/6057/6224753006_9fb962d890.jpg" />
</article>
<article>
<img width="75" height="75"
src="http://farm7.static.flickr.com/6036/6213397745_1d8f223e93_s.jpg" data-src-
full="http://farm7.static.flickr.com/6036/6213397745_1d8f223e93.jpg" />
</article>
</div>
</div>
<!-- END .wmuGallery -->
</div>
<!-- Scripts -->
<script type="text/javascript" src="modernizr.custom.min.js"></script>
<script src="http://www.klossal.com/jquery-1.7.2.min.js"></script>
<script src="../jquery.wmuSlider.js"></script>
<script src="../jquery.wmuGallery.js"></script>
<script>
$('.example1').wmuSlider();
$('.example2').wmuSlider({
touch: true,
animation: 'slide'
});
$('.example3').wmuSlider({
touch: Modernizr.touch,
animation: 'slide',
items: 2
});
$('.example4').wmuGallery();
</script>
<!-- END body -->
</body>
<!-- END html -->
</html>
有多个JS文件,所以我将链接到它们的github:
https://github.com/pastawoua/wmuSlider/blob/master/jquery.wmuGallery.js
https://github.com/pastawoua/wmuSlider/blob/master/jquery.wmuslider.js
https://github.com/pastawoua/wmuSlider/blob/master/demo/modernizr.custom.min.js
这是CSS:
https://github.com/pastawoua/wmuSlider/blob/master/demo/css/demo.css
答案 0 :(得分:4)
如果尚未解决(或未来的搜索者),请检查从github下载的每个文件。当您右键单击将链接另存为时,包括sprites.png
文件在内的每个文件都会显示demo.html
文件的副本。
请查看演示文件并复制/粘贴。
答案 1 :(得分:1)
大写封锁!
将<script src="../jquery.wmuSlider.js"></script>
更改为
<script src="../jquery.wmuslider.js"></script>
:)