猫头鹰轮播不内联

Question

我似乎无法让 owl carousel 在 drupal 7 中工作。我认为这可能与 Chaos 工具发生冲突，但现在我不确定。我在 Drupal 8 中按预期运行它的问题为零，但我的客户在 Drupal 7 中需要它。

我已经尝试将它作为一个块和一个页面。目前，它垂直堆叠内容，而不是我希望的 3 个内联。

这是显示我想要实现的目标的 Drupal 8 链接： https://bryanbowers.me/cms/slideshow

这里是 Drupal 7 版本不工作： https://bryanbowers.me/seven/?q=node/5

我怎样才能获得这些内联？

忘了提到在父 div 中它附加了一个 class="owl-carousel-page_12" 在开发工具中，如果我删除 -page_12，轮播会内联呈现。

我似乎找不到如何阻止添加此类。我还尝试为 class="owl-carousel-page_12" 编写 css 以匹配 "owl-carousel" 的 css，但没有成功。

<script src="https://bryanbowers.me/seven/sites/all/modules/jquery_update/replace/jquery/1.10/jquery.min.js?v=1.10.2"></script>
<script src="https://bryanbowers.me/seven/misc/jquery-extend-3.4.0.js?v=1.10.2"></script>
<script src="https://bryanbowers.me/seven/misc/jquery.once.js?v=1.2"></script>
<script src="https://bryanbowers.me/seven/misc/drupal.js?pvwisq"></script>
<script src="https://bryanbowers.me/seven/sites/all/modules/jquery_update/replace/ui/ui/minified/jquery.ui.core.min.js?v=1.10.2"></script>
<script src="https://bryanbowers.me/seven/sites/all/modules/jquery_update/replace/misc/1.9/jquery.ba-bbq.min.js?v=1.2.1"></script>
<script src="https://bryanbowers.me/seven/sites/all/modules/jquery_update/replace/misc/1.9/overlay-parent.js?v=1.0"></script>
<script src="https://bryanbowers.me/seven/modules/contextual/contextual.js?v=1.0"></script>
<script src="https://bryanbowers.me/seven/sites/all/modules/jquery_update/replace/ui/external/jquery.cookie.js?v=67fb34f6a866c40d0570"></script>

我在页脚中尝试了许多 jquery 和 js 脚本来替换类，但我得到的东西不正确，或者它不会覆盖。希望我能阻止它完全编写自定义类。

/// tried and no
$('.owl-carousel-block2').removeClass('owl-carousel-block2').addClass('owl-carousel');

/// tried and no
$(document).ready(function(){
$('.owl-carousel-block2').removeClass('owl-carousel-block2').addClass('owl-carousel');
});

//// tried and no
$(div.owl-carousel-block2).attr('owl-carousel-block2', 'owl-carousel');


/// tried and no
(function ($) {
    $.fn.replaceClass = function (owl-carousel-block2, owl-carousel) {
        return this.removeClass(owl-carousel-block2).addClass(owl-carousel);
    };
}(jQuery));

//// tried and no
var el = $('.owl-carousel-block2');
el.addClass('owl-carousel');
el.removeClass('owl-carousel-block2');

$('div.owl-carousel-block2').addClass('owl-carousel').removeClass('owl-carousel-block2');


//// tried and no
jQuery.fn.replaceClass = function(sSearch, sReplace) {
    return this.each(function() {
        var s = (' ' + this.owl-carousel-block2 + ' ').replace(
            ' ' + sSearch.trim() + ' ',
            ' ' + sReplace.trim() + ' '
        );
        this.owl-carousel = s.substr(1, s.length - 2);
    });
};

Answer 1

问题 1.（JS）
您已链接到通过 HTTPS 加载的页面，但您正在通过 HTTP 加载您的谷歌字体，从而导致错误导致 JS 中断。
特别是“http://fonts.googleapis.com/css?family=Roboto:400,300,700,500”

修复：
通过 HTTP 加载页面或通过 HTTPS 加载字体

执行上述操作将使 owl carousel JS 正常工作（但它仍然看起来不正确）。

问题 2.（CSS）
owl carousel CSS 已加载但未应用。
正如您所说，这似乎是因为 owl carousel 块没有“owl-carousel”类。
您可以通过简单地将该类添加到开发工具中的块来检查这一点。
这个HERE 似乎有一个问题，它提到了与 ctools 页面管理器的冲突，虽然它似乎与版本 7.x-2.0-alpha0 有关，但您似乎没有使用该模块（从您的站点提供的模块 README.txt）。你在使用 ctools 页面管理器吗？

如果您使用的是 7.x-1.6 版本，我只能推测为什么“owl-carousel”类没有为您输出，但似乎适用于许多其他人。
一种解决方法是运行您已经尝试更改类的 JS（但要修复问题 1），使用我们的预处理函数来添加类，或者甚至只是通过视图接口添加类（因为它似乎是从视图中输出的）。