title: Flex-slider images are coming up blurry
body: <p>I am creating a slideshow in my website using Flex-slider.  The first image comes up fine however after that the following images flash beneath the slide show before appearing and when it does appear it is blurry and unrecognizable. </p>
  
  <p>here is my Jquery.  The link to the images isnt important so i didnt include it. </p>
  
  <pre><code>&lt;link rel="stylesheet" href="library/public/designs/flexslider/flexslider.css" type="text/css" media="screen" /&gt;
  &lt;script defer src="library/public/designs/flexslider/jquery-flexslider.js"&gt;&lt;/script&gt;
  &lt;script src="library/public/designs/flexslider/jquery-easing.js"&gt;&lt;/script&gt;
  &lt;script src="library/public/designs/flexslider/jquery-mousewheel.js"&gt;&lt;/script&gt;
  &lt;script defer src="library/public/designs/flexslider/demo.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
  // Can also be used with $(document).ready()
  $(window).load(function() {
    $('.flexslider').flexslider({
  
   selector : ".slides &gt; div.tile"
  
  
    });
  });
  &lt;/script&gt;
  
  
  &lt;style&gt;
  .flexslider .slides &gt; div.tile {
      display: none;
      backface-visibility:hidden;
      -webkit-backface-visibility:hidden; /* Chrome and Safari */
      -moz-backface-visibility:hidden; /* Firefox */
      -ms-backface-visibility:hidden; /* Internet Explorer */
  }
  .flexslider {
      margin: 0;
      background: #fff;
      border: 0;
      position: relative;
      -webkit-border-radius: 0;
      -moz-border-radius: 0;
      -o-border-radius: 0;
      border-radius: 0;
      box-shadow: none;
      -webkit-box-shadow: none;
      -moz-box-shadow: none;
      -o-box-shadow: none;
      zoom: 1;
  }
  .flex-control-nav {
         width: 100%;
         position: absolute;
         right: 10px;
         top: 10px;
        text-align: right;
       z-index: 100;
  }
  .flex-control-nav li {
      margin: 0 2px;
  }
  .flex-control-paging li a { 
      border: none;
      width: 11px;
      height: 11px;
      display: block;
      background: #ddd;
      cursor: pointer;
      text-indent: -9999px;
      border-radius: 0; 
      box-shadow: none;
     font-size: 0;
  }
  .flex-control-paging li a:hover { 
      background: #0068b3; 
  }
  .flex-control-paging li a.flex-active { 
      background: #0068b3;
      cursor: default;
  }
  .flex-direction-nav {
      *height: 0;
  }
  .flex-direction-nav a {
      width: 30px;
      height: 30px;
      margin: -20px 0 0;
      display: block;
      background: url(library/public/designs/flexslider/bg_direction_nav.png) no-repeat 0 0;
      position: absolute;
      top: 50%;
      cursor: pointer;
      text-indent: -9999px;
      opacity: 0;
      -webkit-transition: all .3s ease;
  }
  .flex-direction-nav .flex-next {
      background-position: 100% 0;
      right: -36px;
  }
  .flex-direction-nav .flex-prev {
      left: -36px;
  }
  .flexslider:hover .flex-next {
      opacity: 0.8;
      right: 5px;
  }
  .flexslider:hover .flex-prev {
      opacity: 0.8;
      left: 5px;
  }
  .flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover {
      opacity: 1;
  }
  .flex-direction-nav .flex-disabled {
      opacity: .3!important;
      filter: alpha(opacity=30);
      cursor: default;
  }
  &lt;/style&gt;
  </code></pre>