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 / 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.

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/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.

• javascript
• mootools
• twitter-bootstrap
• joomla2.5

• @Andres Ilich Thanks for fixing the tag – mjainta Commented May 7, 2012 at 15:32
• It's working fine on my browser (just tried the jsfiddle link): Chrome 18 Mac OS I see three different images, one normal, one with text with green border and one bigger. – ajimix Commented May 7, 2012 at 18:19
• Yes your right, thanks. Thats my bad there, I did the workaround with menting out the Fx.Slide class from Mootools there and forgot to change the link of the JS-file. I removed the ments with this jsfiddle/U2pHH/11 – mjainta Commented May 8, 2012 at 15:39

6 Answers 6

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);
}

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

The problem is that Mootools more is in conflict with twitter bootstrap, that's why its acting weird the carousel. I suggest you using just jQuery or just Mootools. There is a bootstrap Mootools implementation here: https://github./anutron/mootools-bootstrap

Having the same issue. I'm using a plugin called JB Library ( http://www.joomlabamboo./joomla-extensions/jb-library-plugin-a-free-joomla-jquery-plugin ) and this has options to remove Mootools and/or Mootools More from the admin. After turning 'off' Mootools More the issue with the Carousel is 'fixed'. Might be an easier sollution than menting stuff out with regards to updates. Unless you need mootools-more.js for other stuff on the site of course.

Hopefully a better sollution es along soon.

Had the same issue: Bootstrap carousel was not working in registered frontend, since mootools-more.js loaded.

My solution: The Jquery Easy Plugin ( http://www.simplifyyourweb./index.php/downloads/category/8-loading-jquery ) with the option "Remove Mootools when possible" under Advanced Options.

    (function($)
{
    $(document).ready(function(){
        var bootstrapLoaded = (typeof $().carousel == 'function');
        var mootoolsLoaded = (typeof MooTools != 'undefined');
        if (bootstrapLoaded && mootoolsLoaded) {
            Element.implement({
                hide: function () {
                    return this;
                },
                show: function (v) {
                    return this;
                },
                slide: function (v) {
                    return this;
                }
            });
        }
    });
})(jQuery);