Mootools Carousel problems!

[trevorhoullier]

Hi there

The carousel I'm using on my site is skipping an image when I click on the 'next' arrow ie. #1 > #3 > #5 > #7.... The 'prev' arrow just isn't working fullstop.

I'm a total novice at Javascript, so I'm at a total loss as to how I can fix this.

Here's my site:
http://stuseddon.co.uk/

Here's my javascript:
[CODE]window.addEvent('domready', function() {
$$('.images').each(function(div) {
var images = div.getElements('img');

if(images.length > 1) {
images.each(function(img, i) {
img.set('morph', {duration: 500, link: 'cancel'});

if(i > 0) {
img.setStyle('opacity', 0);
}
});

var e = images.length * 1000;

var prev = new Element('a', {'class': 'prev'}).inject(div);
var next = new Element('a', {'class': 'next'}).inject(div);

var arrows = $$(prev, next);
arrows.setStyle('opacity', 0).set('morph', {duration: 100, link: 'cancel'});

div.addEvents({
mouseenter: function() {
arrows.morph({opacity: 0.33});
},
mouseleave: function() {
arrows.morph({opacity: 0});
}
});

arrows.addEvents({
mouseenter: function() {
this.morph({opacity: 1});
},
mouseleave: function() {
this.morph({opacity: 0.33});
}
});

prev.addEvent('click', function() {
e--;

images.morph({opacity: 0});
images[e % images.length].morph({opacity: 1});
});

next.addEvent('click', function() {
e++;

images.morph({opacity: 0});
images[e % images.length].morph({opacity: 1});
});

div.addEvent('click', function(e) {
if($(e.target).get('tag') != 'a') {
next.fireEvent('click');
}
});

div.addEvent('selectstart', function(e) {
e.stop();
});
}
else {
div.setStyle('cursor', 'default');
}
});
});[CODE]

Please help! Thanks in advance.

[trevorhoullier]

All resolved now.
The JQuery was clashing with Mootools!