我正在使用flexslider作为我的新模板。此模板使用twitter bootstrap框架进行编码。 但我对滑块有一些问题。 滑块根本不加载任何图像，当然也不会滑动。 我在模板上看到的只是一个带阴影的盒子（滑块）。 我已经搜索过这个问题，我认为这是因为模板和滑块的jquery存在冲突，这是我的源代码，您怎么看？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Beautiful & Responsive HTML5 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<link href="css/flexslider.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="ico/favicon.png">
</head>
<body>
<!-- contact info -->
<div class="row" id="firstheader">
<div class="span5 offset2">
<ul class="topinfo">
<li class="email-address">Mo@yahoo.com</li>
<li class="phone-number">093</li>
</ul>
</div>
<!-- /contact info -->
<!-- Social icons -->
<div class="span4">
<ul class="topsocial">
<li><a href="http://www.twitter.com/your-username"><span style="background-image:url('img/twitter.png')" class="icon-img"></span></a></li>
<li><a href="http://www.facebook.com/your-username"><span style="background-image:url('img/facebook.png')" class="icon-img"></span></a></li>
<li><a href="https://plus.google.com/u/0/"><span style="background-image:url('img/google.png')" class="icon-img"></span></a></li>
<li><a href="http://linkedin.com/your-username"><span style="background-image:url('img/linkedin.png')" class="icon-img"></span></a></li>
<li><a href="http://dribbble.com/your-username"><span style="background-image:url('img/dribbble.png')" class="icon-img"></span></a></li>
</ul>
</div>
<!-- /Social icons -->
</div>
<!-- /First Header -->
<div class="row" id="secondheader">
<div class="span3 offset2">
<a class="brand" href="#"><img width="196" height="48" alt="Vixual" src="img/logo.png" style="vertical-align: middle;"></a>
</div>
<div class="span6">
<nav id="nav">
<ul id="navigation">
<li><a href="#" class="first">Home</a></li>
<li><a href="#">Services »</a>
<ul>
<li><a href="#">Web Development</a></li>
<li><a href="#"><a title="Logo Design" href="http://www.ourtuts.com/35-examples-of-food-inspired-logo-designs/">Logo Design</a></a></li>
<li><a href="#">Identity & Branding »</a>
<ul>
<li><a href="#">Business Cards</a></li>
<li><a href="#">Brochures</a></li>
<li><a href="#">Envelopes</a></li>
<li><a href="#">Flyers</a></li>
</ul>
</li>
<li><a href="#"><a title="Wordpress" href="http://www.ourtuts.com/wordpress-themes-january-2013/">WordPress</a></a></li>
</ul>
</li>
<li><a href="#">Portfolio »</a>
<ul>
<li><a href="#">Graphic Design</a></li>
<li><a href="#">Photography</a></li>
<li><a href="#">Architecture</a></li>
<li><a href="#">Calligraphy</a></li>
<li><a href="#">Film »</a>
<ul>
<li><a href="#">John Carter</a></li>
<li><a href="#">The Avengers</a></li>
<li><a href="#">The Amazing SpiderMan</a></li>
<li><a href="#">Madagascar 3</a></li>
</ul>
</li>
<li><a href="#">Graffity </a></li>
</ul>
</li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#" class="last">Contact</a></li>
</ul>
</nav>
</div>
</div>
<div class="container">
<div class="span5" id="slider">
<section class="slider">
<div class="flexslider">
<ul class="slides">
<li>
<img src="img/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="img/kitchen_adventurer_lemon.jpg" />
</li>
<li>
<img src="img/kitchen_adventurer_donut.jpg" />
</li>
<li>
<img src="img/kitchen_adventurer_caramel.jpg" />
</li>
</ul>
</div>
</section>
</div>
<!-- /slider -->
<div class="row-fluid">
<div class="span12">
<div class="row-fluid">
<div class="span2"></div>
<div class="span8">Fluid 6</div>
<div class="span2"></div>
</div>
</div>
</div>
</div> <!-- /container -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/bootstrap-transition.js"></script>
<script src="js/bootstrap-alert.js"></script>
<script src="js/bootstrap-modal.js"></script>
<script src="js/bootstrap-dropdown.js"></script>
<script src="js/bootstrap-scrollspy.js"></script>
<script src="js/bootstrap-tab.js"></script>
<script src="js/bootstrap-tooltip.js"></script>
<script src="js/bootstrap-popover.js"></script>
<script src="js/bootstrap-button.js"></script>
<script src="js/bootstrap-collapse.js"></script>
<script src="js/bootstrap-carousel.js"></script>
<script src="js/bootstrap-typeahead.js"></script>
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<!-- FlexSlider -->
<script src="js/jquery.flexslider.js"></script>
<script type="text/javascript">
jQuery = jQuery.noConflict();
jQuery(window).load(function() {
jQuery('.featured-slider').flexslider();
});
</script>
</body>
</html>
答案 0 :(得分：0)
你在一个不存在的元素上调用flexslider
jQuery('.featured-slider').flexslider();
这应该是：
jQuery('.flexslider').flexslider();