[英]Why isn't my JS slider working?
我是HTML / CSS的新手,我最近购买了引导程序主题,并且尝试使用它们提供的HTML代码段创建自己的首页。
我复制/粘贴了一段代码和JS的文件路径,但是它根本不起作用。 资产(文本,图像,视频)全部出现,但是没有样式,并且都是静态的。 CSS和JS都不在该段上工作。
这是其外观的实时演示:
http://htmlstream.com/preview/unify-v1.7/index.html
这是我当前的样子:
http://i.gyazo.com/7f8caf3b13c10c3dbfd340afd3fcb1db.png
这是滑块的HTML段:
<!--=== Slider ===-->
<div class="slider-inner">
<div id="da-slider" class="da-slider">
<div class="da-slide">
<h2><i>CLEAN & FRESH</i> <br /> <i>FULLY RESPONSIVE</i> <br /> <i>DESIGN</i></h2>
<p><i>Lorem ipsum dolor amet</i> <br /> <i>tempor incididunt ut</i> <br /> <i>veniam omnis </i></p>
<div class="da-img"><img class="img-responsive" src="assets/plugins/parallax-slider/img/1.png" alt=""></div>
</div>
<div class="da-slide">
<h2><i>RESPONSIVE VIDEO</i> <br /> <i>SUPPORT AND</i> <br /> <i>MANY MORE</i></h2>
<p><i>Lorem ipsum dolor amet</i> <br /> <i>tempor incididunt ut</i></p>
<div class="da-img">
<iframe src="http://player.vimeo.com/video/47911018" width="530" height="300" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
</div>
<div class="da-slide">
<h2><i>USING BEST WEB</i> <br /> <i>SOLUTIONS WITH</i> <br /> <i>HTML5/CSS3</i></h2>
<p><i>Lorem ipsum dolor amet</i> <br /> <i>tempor incididunt ut</i> <br /> <i>veniam omnis </i></p>
<div class="da-img"><img src="assets/plugins/parallax-slider/img/html5andcss3.png" alt="image01" /></div>
</div>
<div class="da-arrows">
<span class="da-arrows-prev"></span>
<span class="da-arrows-next"></span>
</div>
</div>
</div><!--/slider-->
<!--=== End Slider ===-->
这是我的HTML文件的HEAD部分:
<head>
<title>Ideal Improvements South West LTD | Home</title>
<!-- Meta -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Favicon -->
<link rel="shortcut icon" href="favicon.ico">
<!-- Web Fonts -->
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:400,300,600&subset=cyrillic,latin">
<!-- CSS Global Compulsory -->
<link rel="stylesheet" href="assets/plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<!-- CSS Header and Footer -->
<link rel="stylesheet" href="assets/css/headers/header-v3.css">
<link rel="stylesheet" href="assets/css/footers/footer-v1.css">
<!-- CSS Implementing Plugins -->
<link rel="stylesheet" href="assets/plugins/animate.css">
<link rel="stylesheet" href="assets/plugins/line-icons/line-icons.css">
<link rel="stylesheet" href="assets/plugins/font-awesome/css/font-awesome.min.css">
<!-- CSS Theme -->
<link rel="stylesheet" href="assets/css/theme-colors/default.css" />
<!-- CSS Customization -->
<link rel="stylesheet" href="assets/css/custom.css">
这是文件底部的JS部分:
<!-- JS Global Compulsory -->
<script type="text/javascript" src="assets/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript" src="assets/plugins/jquery/jquery-migrate.min.js"></script>
<script type="text/javascript" src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<!-- JS Implementing Plugins -->
<script type="text/javascript" src="assets/plugins/back-to-top.js"></script>
<script type="text/javascript" src="assets/plugins/smoothScroll.js"></script>
<script type="text/javascript" src="assets/plugins/parallax-slider/js/modernizr.js"></script>
<script type="text/javascript" src="assets/plugins/parallax-slider/js/jquery.cslider.js"></script>
<script type="text/javascript" src="assets/plugins/owl-carousel/owl-carousel/owl.carousel.js"></script>
<!-- JS Customization -->
<script type="text/javascript" src="assets/js/custom.js"></script>
<!-- JS Page Level -->
<script type="text/javascript" src="assets/js/app.js"></script>
<script type="text/javascript" src="assets/js/plugins/owl-carousel.js"></script>
<script type="text/javascript" src="assets/js/plugins/parallax-slider.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
App.init();
OwlCarousel.initOwlCarousel();
StyleSwitcher.initStyleSwitcher();
ParallaxSlider.initParallaxSlider();
});
</script>
<!--[if lt IE 9]>
<script src="assets/plugins/respond.js"></script>
<script src="assets/plugins/html5shiv.js"></script>
<script src="assets/plugins/placeholder-IE-fixes.js"></script>
<![endif]-->
我在chrome开发工具控制台中收到7个错误。 4是“未捕获的语法错误:意外的令牌非法” 2是“无法加载资源:err_cache_missing和err_file_not_found(缓存一个链接到vimeo视频链接,而未找到的文件链接到谷歌字体。)最后一个是“未捕获的referenceerror:样式切换器未定义”,我相信这与我复制一些代码的方式有关,如果您观看现场演示站点,它的右上角有一个样式切换器。
我拿了一个演示html文件,并将其放到我的网站导演中,它使用相同的文件路径访问JS和CSS。
hello you seen your code properly i think something wrong
<script type="text/javascript" src="assets/plugins/parallax- slider/js/modernizr.js"></script>
Space between js name i think this is problem.
or anything else please share your website link or demo code slider
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.