Question

我在我的mvc应用程序中使用了一个免费模板，一切正常，除了滑块我不知道我错过了什么这是我第二次尝试使用flex-slider之前我遇到了同样的问题这是_Layout.aspx页面

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
<!-- CSS
================================================== -->
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' 
type='text/css'>
<link rel="stylesheet" href="~/Content/bootstrap.css">
<link rel="stylesheet" href="~/Content/bootstrap-responsive.css">
<link rel="stylesheet" href="~/Content/prettyPhoto.css" />
<link rel="stylesheet" href="~/Content/flexslider.css" />
<link rel="stylesheet" href="~/Content/custom-styles.css">
<!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js">
    </script>
    <link rel="stylesheet" href="css/style-ie.css"/>
<![endif]-->

<!-- Favicons
================================================== -->
<link rel="shortcut icon" href="img/favicon.ico">
<link rel="apple-touch-icon" href="~/Content/img/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="~/Content/img/apple-touch-
icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="~/Content/img/apple-
 touch-icon-114x114.png">

<!-- JS
================================================== -->
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="~/Script/bootstrap.js"></script>
<script src="~/Script/jquery.prettyPhoto.js"></script>
<script src="~/Script/jquery.flexslider.js"></script>
<script src="~/Script/jquery.custom.js"></script>
<script type="text/javascript">
 $(document).ready(function () {

$("#btn-blog-next").click(function () {
  $('#blogCarousel').carousel('next')
});
 $("#btn-blog-prev").click(function () {
  $('#blogCarousel').carousel('prev')
});

 $("#btn-client-next").click(function () {
  $('#clientCarousel').carousel('next')
});
 $("#btn-client-prev").click(function () {
  $('#clientCarousel').carousel('prev')
});

 });

 $(window).load(function(){

$('.flexslider').flexslider({
    animation: "slide",
    slideshow: true,
    start: function(slider){
      $('body').removeClass('loading');
    }
});
  });

</script>
</head>

    <.....some extra code here......>
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
   </body>
  </html>

这是索引页面中的滑块代码

@{
ViewBag.Title = "Home Page";
}
  <div class="row headline">
  <!-- Begin Headline -->
  <!-- Slider Carousel
   ================================================== -->
   <div class="span8">
     <div class="flexslider">
        <ul class="slides">
            <li><a href="gallery-single.htm"><img 
       src="~/Content/img/gallery/slider-img-1.jpg" alt="slider" /></a></li>
            <li><a href="gallery-single.htm"><img 
       src="~/Content/img/gallery/slider-img-1.jpg" alt="slider" /></a></li>
            <li><a href="gallery-single.htm"><img 
       src="~/Content/img/gallery/slider-img-1.jpg" alt="slider" /></a></li>
            <li><a href="gallery-single.htm"><img 
       src="~/Content/img/gallery/slider-img-1.jpg" alt="slider" /></a></li>
            <li><a href="gallery-single.htm"><img 
      src="~/Content/img/gallery/slider-img-1.jpg" alt="slider" /></a></li>
        </ul>
    </div>
</div>

我希望你能帮助我找出问题所在。

Flex滑块没有显示？

0 个答案: