title: Flexslider loading and sliding images issue?
body: <p>I'm using flexslider for my new template . This template is coding with twitter bootstrap framework .
  But i have a few problems with the slider .
  The slider don't load any images at all and of course don't slide .
  All i see on the template is just a box with shadow ( the slider's  ) .
  I have searched for this problem and i think this is because of a conflict in template's and slider's jquery , this is my source code , what do you think ?</p>
  
  <pre><code>                &lt;!DOCTYPE html&gt;
              &lt;html lang="en"&gt;
                &lt;head&gt;
                  &lt;meta charset="utf-8"&gt;
                  &lt;title&gt;Beautiful &amp; Responsive HTML5 Template&lt;/title&gt;
                  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
                  &lt;meta name="description" content=""&gt;
                  &lt;meta name="author" content=""&gt;
  
                  &lt;!-- Le styles --&gt;
                  &lt;link href="css/bootstrap.css" rel="stylesheet"&gt;
                  &lt;link href="css/bootstrap-responsive.css" rel="stylesheet"&gt;
                  &lt;link href="css/main.css" rel="stylesheet"&gt;
                  &lt;link href="css/flexslider.css" rel="stylesheet"&gt;
                  &lt;link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans"&gt;
  
                  &lt;!-- HTML5 shim, for IE6-8 support of HTML5 elements --&gt;
                  &lt;!--[if lt IE 9]&gt;
                    &lt;script src="js/html5shiv.js"&gt;&lt;/script&gt;
                  &lt;![endif]--&gt;
  
                  &lt;!-- Fav and touch icons --&gt;
                  &lt;link rel="apple-touch-icon-precomposed" sizes="144x144" href="ico/apple-touch-icon-144-precomposed.png"&gt;
                  &lt;link rel="apple-touch-icon-precomposed" sizes="114x114" href="ico/apple-touch-icon-114-precomposed.png"&gt;
                    &lt;link rel="apple-touch-icon-precomposed" sizes="72x72" href="ico/apple-touch-icon-72-precomposed.png"&gt;
                                  &lt;link rel="apple-touch-icon-precomposed" href="ico/apple-touch-icon-57-precomposed.png"&gt;
                                                 &lt;link rel="shortcut icon" href="ico/favicon.png"&gt;
                &lt;/head&gt;
  
                &lt;body&gt;
                          &lt;!-- contact info --&gt;
                          &lt;div class="row" id="firstheader"&gt;
  
                              &lt;div class="span5 offset2"&gt;
                                  &lt;ul class="topinfo"&gt;
                              &lt;li class="email-address"&gt;Mo@yahoo.com&lt;/li&gt;
                              &lt;li class="phone-number"&gt;093&lt;/li&gt;
                                  &lt;/ul&gt;
                              &lt;/div&gt;
                              &lt;!-- /contact info --&gt;
                              &lt;!-- Social icons --&gt;
                              &lt;div class="span4"&gt;
              &lt;ul class="topsocial"&gt;
              &lt;li&gt;&lt;a href="http://www.twitter.com/your-username"&gt;&lt;span style="background-image:url('img/twitter.png')" class="icon-img"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="http://www.facebook.com/your-username"&gt;&lt;span style="background-image:url('img/facebook.png')" class="icon-img"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="https://plus.google.com/u/0/"&gt;&lt;span style="background-image:url('img/google.png')" class="icon-img"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="http://linkedin.com/your-username"&gt;&lt;span style="background-image:url('img/linkedin.png')" class="icon-img"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="http://dribbble.com/your-username"&gt;&lt;span style="background-image:url('img/dribbble.png')" class="icon-img"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
  
                              &lt;/div&gt;
                              &lt;!-- /Social icons --&gt;
  
                      &lt;/div&gt;
                      &lt;!-- /First Header --&gt;
                  &lt;div class="row" id="secondheader"&gt;
  
                              &lt;div class="span3 offset2"&gt;
                              &lt;a class="brand" href="#"&gt;&lt;img width="196" height="48" alt="Vixual" src="img/logo.png" style="vertical-align: middle;"&gt;&lt;/a&gt;
                              &lt;/div&gt;
  
                              &lt;div class="span6"&gt;
  
              &lt;nav id="nav"&gt;
                  &lt;ul id="navigation"&gt;
                      &lt;li&gt;&lt;a href="#" class="first"&gt;Home&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Services &amp;raquo;&lt;/a&gt;
                          &lt;ul&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Web Development&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;&lt;a title="Logo Design" href="http://www.ourtuts.com/35-examples-of-food-inspired-logo-designs/"&gt;Logo Design&lt;/a&gt;&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Identity &amp; Branding &amp;raquo;&lt;/a&gt;
                                  &lt;ul&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Business Cards&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Brochures&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Envelopes&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Flyers&lt;/a&gt;&lt;/li&gt;
                                  &lt;/ul&gt;                   
                              &lt;/li&gt;                   
                              &lt;li&gt;&lt;a href="#"&gt;&lt;a title="Wordpress" href="http://www.ourtuts.com/wordpress-themes-january-2013/"&gt;WordPress&lt;/a&gt;&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Portfolio &amp;raquo;&lt;/a&gt;
                          &lt;ul&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Graphic Design&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Photography&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Architecture&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Calligraphy&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Film &amp;raquo;&lt;/a&gt;
                                  &lt;ul&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;John Carter&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;The Avengers&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;The Amazing SpiderMan&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Madagascar 3&lt;/a&gt;&lt;/li&gt;
                                  &lt;/ul&gt;                       
                              &lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Graffity &lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;               
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Testimonials&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Blog&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#" class="last"&gt;Contact&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/nav&gt;
  
  
  
                              &lt;/div&gt;
  
  
  
                  &lt;/div&gt; 
              &lt;div class="container"&gt;
                      &lt;div class="span5" id="slider"&gt;
                      &lt;section class="slider"&gt;
                      &lt;div class="flexslider"&gt;
                        &lt;ul class="slides"&gt;
                          &lt;li&gt;
                              &lt;img src="img/kitchen_adventurer_cheesecake_brownie.jpg" /&gt;
                              &lt;/li&gt;
                              &lt;li&gt;
                              &lt;img src="img/kitchen_adventurer_lemon.jpg" /&gt;
                              &lt;/li&gt;
                              &lt;li&gt;
                              &lt;img src="img/kitchen_adventurer_donut.jpg" /&gt;
                              &lt;/li&gt;
                              &lt;li&gt;
                              &lt;img src="img/kitchen_adventurer_caramel.jpg" /&gt;
                              &lt;/li&gt;
                        &lt;/ul&gt;
                      &lt;/div&gt;
                      &lt;/section&gt;
                      &lt;/div&gt;
                  &lt;!-- /slider --&gt;
                  &lt;div class="row-fluid"&gt;
                      &lt;div class="span12"&gt;
  
                          &lt;div class="row-fluid"&gt;
                              &lt;div class="span2"&gt;&lt;/div&gt;
                              &lt;div class="span8"&gt;Fluid 6&lt;/div&gt;
                              &lt;div class="span2"&gt;&lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt; &lt;!-- /container --&gt;
  
                  &lt;!-- Le javascript
                  ================================================== --&gt;
                  &lt;!-- Placed at the end of the document so the pages load faster --&gt;
                  &lt;script src="js/bootstrap-transition.js"&gt;&lt;/script&gt;
                  &lt;script src="js/bootstrap-alert.js"&gt;&lt;/script&gt;
                  &lt;script src="js/bootstrap-modal.js"&gt;&lt;/script&gt;
                  &lt;script src="js/bootstrap-dropdown.js"&gt;&lt;/script&gt;
                  &lt;script src="js/bootstrap-scrollspy.js"&gt;&lt;/script&gt;
                  &lt;script src="js/bootstrap-tab.js"&gt;&lt;/script&gt;
                  &lt;script src="js/bootstrap-tooltip.js"&gt;&lt;/script&gt;
                  &lt;script src="js/bootstrap-popover.js"&gt;&lt;/script&gt;
                  &lt;script src="js/bootstrap-button.js"&gt;&lt;/script&gt;
                  &lt;script src="js/bootstrap-collapse.js"&gt;&lt;/script&gt;
                  &lt;script src="js/bootstrap-carousel.js"&gt;&lt;/script&gt;
                  &lt;script src="js/bootstrap-typeahead.js"&gt;&lt;/script&gt;
  
                &lt;!-- jQuery --&gt;
                &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"&gt;&lt;/script&gt;
  
                &lt;!-- FlexSlider --&gt;
                &lt;script src="js/jquery.flexslider.js"&gt;&lt;/script&gt;
  
               &lt;script type="text/javascript"&gt;
              jQuery = jQuery.noConflict();
              jQuery(window).load(function() {
              jQuery('.featured-slider').flexslider();
              });
  
              &lt;/script&gt;
                &lt;/body&gt;
                  &lt;/html&gt;
  </code></pre>