muy buenas el caso es que tengo 2 script que quiero insertar en la misma pagina, pero uno me anula el otro y viceversa según la posición en que los ponga, es un slider junto a un carrousel de imágenes, os dejo el código para que les hecheis un vistazo tal como esta lo que me funciona es el carrusel, gracias de antemano.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jFlow Plus v2</title>
<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 rel="stylesheet" href="css/reset.css" media="screen">
<link rel="stylesheet" href="css/style.css" media="screen">
<style type="text/css">
.image_carousel {
padding: 0px 0 0px 0px;
margin-left: -40px;
margin-top: 120px;
}
.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>
<link href="styles/jflow.style.css" type="text/css" rel="stylesheet"/>
<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").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>
</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//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/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/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>
<script type="text/javascript" language="javascript" src="jquery.js"></script>
<script type="text/javascript" language="javascript" src="jquery.carouFredSel-5.6.1.js"></script>
<script type="text/javascript" language="javascript">
$(function() {
$('#foo1').carouFredSel({
width: '100%',
auto : {
items : 5,
duration : 15000,
easing : "linear",
pauseDuration : 0,
pauseOnHover : "immediate"
}
});
});
</script>
</body>
</html>