Twitter Bootstrap Carousel使用Joomla及其Mootools

Question

我正在使用Twitter Bootstrap为Joomla 2.5.x制作模板.我还想为该模板使用Bootstrap Carousel插件.

当Carousel与Joomla的Mootools实现一起使用时,我遇到了问题.Carousel元素的样式正在以负边距变化,使其对用户不可见.为了向您展示发生了什么,我为您准备了一个jsfiddle http://jsfiddle.net/U2pHH/11/.

由于Carousels更改样式属性,Carousel正在使每个第二个图像对用户不可见,但用户应该看到每个幻灯片.

我已经看过Carousel插件和Mootools JS文件的源代码,但遗憾的是无法解决问题的原因.我想也许是jQuery和Mootools之间的函数/类的一些命名问题,但在那里找不到任何问题.

我希望你能在这里帮助我.

编辑:我发现它与fx.Slide类的mootools-more.js有关,删除源代码中的类解决了问题.但这仍然没有真正的解决方案,任何帮助仍然非常感激.

Answer 1

以下是针对Joomla和mootools的修复,

在jq调用之后添加此代码,它可以在任何js文件中

加

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

Answer 2

Benn提供的另一种实现方式是

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

我最终得到了什么 - 我创建了自定义 Mootools更多版本,没有 Fx.Slide

Answer 3

问题是 Mootools 更多的是与 twitter bootstrap 冲突，这就是为什么它的轮播表现得很奇怪。我建议您只使用 jQuery 或 Mootools。这里有一个 bootstrap Mootools 实现：https ://github.com/anutron/mootools-bootstrap