Question

我似乎无法让猫头鹰旋转木马在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加载google字体会导致错误，从而破坏JS。
特别是“ http://fonts.googleapis.com/css?family=Roboto:400,300,700,500”

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

执行上述操作将使猫头鹰轮播JS工作（但仍然无法正确显示）。

问题2（CSS）
猫头鹰轮播CSS已加载但未应用。
如您所说，这似乎是因为猫头鹰轮播块没有“猫头鹰轮播”类。
您可以通过在开发工具中将该类简单地添加到块中来进行检查。
这个HERE似乎存在一个问题，其中提到与ctools页面管理器发生冲突，尽管它似乎与版本7.x-2.0-alpha0有关，但是您似乎并没有使用该模块（判断从您的网站所服务的模块README.txt中）。您正在使用ctools页面管理器吗？

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

猫头鹰轮播不在线

1 个答案: