Javascript slider skips first frame - Prototype

Question

I'm using the Prototype Slider, and when it hits the final slide, slider starts again but skips the opening image.

Can someone take a look at my code?

My HTML:

<div id="carousel-wrapper">
<div id="carousel-content">
<div id="slide1" class="slide" > 
<div >Slide 1</span></div>
<div id="slide2" class="slide" > 
<div >slide 2</span></div>
<div id="slide3" class="slide" > 
<div >Slide 3</span></div>
<div id="slide4" class="slide" > 
<div >Slide 4</span></div>
</div>
</div>
</div>
<script type="text/javascript">// <![CDATA[
            Slider = new Carousel($('carousel-wrapper'), $$('#carousel-wrapper .slide'), $$(' a.carousel-jumper', 'a.carousel-control'), { duration: 0.5, auto: true, frequency: 5, circular: 'false', effect: 'slide', wheel: 'false',   selectedClassName: 'selected'});
// ]]></script>

My CSS:

#carousel-wrapper {
width: 785px;
height: 540px;
overflow: hidden;
}
#carousel-content {
width: 3640px;
}
.cms-page-view .breadcrumbs {display:none;}
#carousel-content .slide {
float: left;
width: 785px;
height: 540px;
}
div#slide1{background-image:url("slide-1.jpg");}
div#slide2{background-image:url("slide-2.jpg");}
div#slide3{background-image:url("slide-3.jpg");}
div#slide4{background-image:url("slide-4.jpg");}

Again, this is using the prototype library in a Magento based site.

The URL is wwwdotlylifdotcom/home

Answer 1

From the Carousel widget you added there is this instruction:

By default when the first/last slide is reached, calling prev/next does nothing. If you want the effect to continue, you must do two things: Set the circular parameter true and duplicate the first slide in the HTML. It's the only way of giving the impression of a continous movement.

So you need to add an extra copy of "Slide 1" after "Slide 4".