Hi all

I'm using the caroufredsel carousel - http://caroufredsel.dev7studios.com

My problem is the carousel dosen't load correctly until the window is resized

Does anyone know why this is.

http://www.ttmt.org.uk/carousel/index.html


Code:
  <!DOCTYPE html>
  <html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

    <!--jQuery-->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script type="text/javascript" language="javascript" src="js/jquery.carouFredSel.js"></script>

    <!--css-->

    <style type="text/css">
      *{
        margin:0;
        padding:0;
      }
      .carousel img{
        max-width:900px;
        height:auto;
      }

      @media only screen and (max-width:800px){
        .carousel img{
          max-width:700px;
          height:auto;
        }
      }
      @media only screen and (max-width:500px){
        .carousel img{
          max-width:400px;
          height:auto;
        }
      }
      @media only screen and (max-width:400px){
        .carousel img{
          max-width:300px;
          height:auto;
        }
      }

    </style>


    <!--[if lt IE 9]>
  	     <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  	<![endif]-->

    <title>Title of the document</title>
    </head>

  <body>

    <section >
  		<div class="carousel">
        <img src="images/slide-show-1.jpg" />
        <img src="images/slide-show-2.jpg" />
        <img src="images/slide-show-3.jpg" />
        <img src="images/slide-show-4.jpg" />
      </div>

  	</section>


  	<script type="text/javascript" language="javascript">
    	$(document).ready(function(){
    		$('.carousel').carouFredSel({
    			width: '100%',
    			items: {
    				visible: 3,
    				start: -1
    			},
    			scroll: {
    				items: 1,
    				duration: 1000,
    				timeoutDuration: 3000
    			},

    		});
    	});
    </script>		

  </body>

  </html