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。这里有一个引导程序Mootools实现：https://github.com/anutron/mootools-bootstrap

Answer 4

遇到同样的问题。我正在使用一个名为JB Library（http://www.joomlabamboo.com/joomla-extensions/jb-library-plugin-a-free-joomla-jquery-plugin）的插件，它有从管理员中删除Mootools和/或Mootools More的选项。关闭'Mootools'之后更多关于Carousel的问题是“固定的”。可能更容易解决，而不是评论更新的东西。除非您在网站上需要mootools-more.js用于其他内容。

希望很快能有更好的解决方案。

Answer 5

有同样的问题：自从mootools-more.js加载后，Bootstrap carousel无法在注册的前端工作。

我的解决方案： Jquery Easy插件（http://www.simplifyyourweb.com/index.php/downloads/category/8-loading-jquery）带有选项＆＃34;尽可能删除Mootools＆＃34;在高级选项下。

Answer 6

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

Twitter Bootstrap Carousel使用Joomla及其Mootools

6 个答案: