Flexslider加载和滑动图像问题?

时间:2013-03-05 10:32:11

标签: jquery flex twitter-bootstrap slider flexslider

我正在使用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 &raquo;</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 &raquo;</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 &raquo;</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 &raquo;</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>

1 个答案:

答案 0 :(得分:0)

你在一个不存在的元素上调用flexslider

jQuery('.featured-slider').flexslider();

这应该是:

jQuery('.flexslider').flexslider();