0

I found this code at ( http://code.google.com/p/prototype-carousel/ ) but somehow I can't manage him to work. Can someone help me please? The image load fine but the buttons simple does nothing. Thanks in advance.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Teste</title>
    <script type="text/javascript" src="prototype.js"></script>
    <script type="text/javascript" src="scriptaculous.js"></script>
    <script type="text/javascript" src="carousel.js"></script>
<style type="text/css">

#carousel-wrapper {
    width: 980px;
    height: 580px;
    overflow: hidden;
}
#carousel-content {
    width: 2500px;
}
#carousel-content .slide {
    float: left;
    width: 980px;
    height: 580px;
}


</style>
</head>

<body>
<div id="carousel-wrapper">

    <div class="controls">
       <a href="javascript:" class="carousel-control" rel="next" style="float: right">Next</a>
       <a href="javascript:" class="carousel-control" rel="prev">Previous</a>
    </div>

    <div id="carousel-content">
        <div class="slide">
            <img src="sample1.jpg" />
       </div>

        <div class="slide">
            <img src="sample2.jpg" />
        </div>

        <div class="slide">
            <img src="sample3.jpg" />
        </div>

    </div>

    <script type="text/javascript">
    new Carousel('carousel-wrapper', $$('#carousel-content .slide'), $$('a.carousel-control'),
    { wheel:false, circular:true, auto:false, effect:scroll, frequency:5, duration:1, });
    </script>

</div>

</body>

</html>
JaredMcAteer
  • 21,688
  • 5
  • 49
  • 65
rmz
  • 507
  • 2
  • 6
  • 11

1 Answers1

1

You need to include the CSS 

#carousel-wrapper {
   width: 500px;
   height: 500px;
   overflow: hidden;
}
#carousel-content {
   width: 2500px;
}
#carousel-content .slide {
   float: left;
   width: 500px;
   height: 500px;
}​

You should probably also move the controls and <script> contents outside of the wrapper.

Here's a working example:

http://jsfiddle.net/eyweA/1/

JaredMcAteer
  • 21,688
  • 5
  • 49
  • 65
  • Thank you very much for your help. I found the biggest problem. It was some missing files from "scriptaculous". I thought that I only needed that 3 "Js" like the dev said... :S – rmz May 31 '12 at 20:33