de este modo lo tengo ahora......
<html>
<head>
<title>Perfil</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="css/styless.css" type="text/css" charset="utf-8"/>
<link rel="stylesheet" href="css/reset.css" media="screen">
<link rel="stylesheet" href="css/style.css" media="screen">
<link href='http://fonts.googleapis.com/css?family=Rokkitt:700' rel='stylesheet' type='text/css'>
<link href="styles/slider.css" type="text/css" rel="stylesheet"/>
<link href="styles/jflow.style.css" type="text/css" rel="stylesheet"/>
<style type="text/css">
body {
background-image: url(../../../../../Users/usuario/Desktop/WEB/fondos.png);
}
.image_carousel {
padding: 0px 0 0px 0px;
margin-left: 0px;
margin-top: 9px;
}
.image_carousel img {
border: 1px solid #ccc;
background-color: white;
padding: 5px;
margin: 7px;
display: block;
float: left;
-moz-border-radius:10px 0px 0px 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
-khtml-border-bottom-left-radius: 10px;
-khtml-border-top-left-radius: 10px;
}
.clearfix {
float: none;
clear: both;
}
</style>
</head>
<body>
<div id="sliderContainer">
<div id="mySlides">
<div id="slide1" class="slide"> <img src="images/jflow-sample-slide1.png" alt="Slide 1 jFlow Plus" />
</div>
<div id="slide2" class="slide"> <img src="images/jflow-sample-slide2.png" alt="Slide 2 jFlow Plus" />
</div>
<div id="slide3" class="slide"> <img src="images/jflow-sample-slide3.png" alt="Slide 3 jFlow Plus" />
</div>
<div id="myController">
<span class="jFlowControl"></span>
<span class="jFlowControl"></span>
<span class="jFlowControl"></span>
</div>
<div class="jFlowPrev"></div>
<div class="jFlowNext"></div>
</div>
<div class="image_carousel">
<div id="foo1">
<img src="file:///C:/AppServ/www/menu2/albun/examples/images/small/1.jpg" alt="basketball" width="125" height="75" />
<img src="file:///C:/AppServ/www/menu2/albun/examples/images/small/2.jpg" alt="beachtree" width="125" height="75" />
<img src="file:///C:/AppServ/www/menu2/albun/examples/images/small/10.jpg" alt="cupcackes" width="125" height="75" />
<img src="file:///C:/AppServ/www/menu2/albun/examples/images/small/5.jpg" alt="hangmat" width="125" height="75" />
<img src="file:///C:/AppServ/www/menu2/albun/examples/images/small/6.jpg" alt="new york" width="125" height="75" />
<img src="file:///C:/AppServ/www/menu2/albun/examples/images/small/11.jpg" alt="laundry" width="160" height="75" />
<img src="file:///C:/AppServ/www/menu2/albun/examples/images/small//3.jpg" alt="mom son" width="125" height="75" />
<img src="file:///C:/AppServ/www/menu2/albun/examples/images/small/4.jpg" alt="picknick" width="125" height="75" />
<img src="file:///C:/AppServ/www/menu2/albun/examples/images/small/8.jpg" alt="shoes" width="125" height="75" />
<img src="file:///C:/AppServ/www/wuaku/menu2/albun/examples/images/small/7.jpg" alt="paris" width="125" height="75" />
<img src="file:///C:/AppServ/www/menu2/albun/examples/images/small/9.jpg" alt="sunbading" width="125" height="75" />
<img src="file:///C:/AppServ/www/menu2/albun/examples/images/small/12.jpg" alt="yellow couple" width="160" height="75" />
<img src="file:///C:/AppServ/www/wuaku/menu2/albun/examples/images/small//14.jpg" alt="mom son" width="125" height="75" />
<img src="file:///C:/AppServ/www/menu2/albun/examples/images/small/17.jpg" alt="picknick" width="125" height="75" />
<img src="file:///C:/AppServ/www/wuaku/menu2/albun/examples/images/small/15.jpg" alt="shoes" width="125" height="75" />
<img src="file:///C:/AppServ/www/menu2/albun/examples/images/small/18.jpg" alt="paris" width="125" height="75" />
<img src="file:///C:/AppServ/www/menu2/albun/examples/images/small/16.jpg" alt="sunbading" width="125" height="75" />
<img src="file:///C:/AppServ/www/menu2/albun/examples/images/small/13.jpg" alt="yellow couple" width="160" height="75" />
</div>
<div class="clearfix"></div>
</div>
<div class="header"></div>
<ul id="nas">
<li class="home"><a href=""><span></span></a></li>
<div id="content">
<div class="navis" id="nav">
<div class="item user">
<img src="images/bg_user.png" alt="" width="199" height="199" class="circle"/>
<a href="#" class="icon"></a>
<h2>katy</h2>
<ul>
<li><a href="#">Mi Perfil</a></li>
</ul>
</div>
<!-- The JavaScript -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="scripts/jflow.plus.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(myController){
$("#myController").jFlow({
controller: ".jFlowControl", // must be class, use . sign
slideWrapper : "#jFlowSlider", // must be id, use # sign
slides: "#mySlides", // the div where all your sliding divs are nested in
selectedWrapper: "jFlowSelected", // just pure text, no sign
effect: "flow", //this is the slide effect (rewind or flow)
width: "894px", // this is the width for the content-slider
height: "367px", // this is the height for the content-slider
duration: 400, // time in milliseconds to transition one slide
pause: 5000, //time between transitions
prev: ".jFlowPrev", // must be class, use . sign
next: ".jFlowNext", // must be class, use . sign
auto: true
});
});
</script>
<script type="text/javascript" language="javascript" src="jquery.carouFredSel-5.6.1.js"></script>
<script type="text/javascript" language="javascript">
$(function(foo1) {
$('#foo1').carouFredSel({
width: '100%',
auto : {
items : 5,
duration : 15000,
easing : "linear",
pauseDuration : 0,
pauseOnHover : "immediate"
}
});
});
</script>
</body>
</html>
Un saludo