Twitter Bootstrap Carousel using Joomla and its Mootools

Question

I am working on a template for Joomla 2.5.x, using Twitter Bootstrap. I also want to use the Bootstrap Carousel Plugin for that template.

I got a problem when the Carousel is used with Joomla´s Mootools implementation. The style of the Carousel element is getting changed with a negative margin, making it invisible for the user. To show you exactly whats happening I have prepared a jsfiddle http://jsfiddle.net/U2pHH/11/ for you.

The Carousel is making every second image not visible to the user due to the Carousels changing style attribute, but the user should see every slide.

I have looked already into the sourcecode of the Carousel Plugin and Mootools JS Files but sadly couldnt work out the cause of the problem. I thought maybe its some naming-problem of functions/classes between jQuery and Mootools but couldnt find any problem there.

I hope you can help me out here.

Edit: I figured out it has something to do with the Fx.Slide class of mootools-more.js, deleting the class out of the sourcecode solved the problem. But thats still no really solution, any help is still very appreciated.

Answer 1

Here is the fix specific to Joomla and mootools more ,

add this code after jq call , it can be in any js file

add

if (typeof jQuery != 'undefined') { 
(function($) { 
       $(document).ready(function(){
        $('.carousel').each(function(index, element) {
                $(this)[index].slide = null;
               });
         });
 })(jQuery);
}

Answer 2

Another implementation of the same thing that Benn provided is

if (typeof jQuery != 'undefined' && typeof MooTools != 'undefined' ) {
    Element.implement({
        slide: function(how, mode){
            return this;
        }
    });
}

What I finally ended up with - I created custom Mootools More build without Fx.Slide