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.
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.com/anutron/mootools-bootstrap