CODEWITHSUNDEEP
javascripthtmlcssprototypejsscriptaculous
rmz
rmz

Reputation: 517

Javascript Prototype-Carousel

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>

Upvotes: 0

Views: 2722

Answers (1)

JaredMcAteer
JaredMcAteer

Reputation: 22536

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/

Upvotes: 1

Related Questions