猫头鹰旋转木马不内联

Question

我似乎无法让猫头鹰旋转木马在drupal 7中工作。我以为这可能是与混沌工具的冲突，但现在我不确定。我在 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 已加载但未应用。
正如您所说，这似乎是因为 owl 轮播块没有"owl-carousel"类。
您可以通过简单地将该类添加到开发工具中的块来检查这一点。
这里似乎有一个问题，它提到了与ctools页面管理器的冲突，尽管它似乎与版本7.x-2.0-alpha0有关，但您似乎没有使用该模块(从模块README判断.txt您的网站提供服务(。您是否正在使用ctools页面管理器？

如果您使用的是 7.x-1.6 版，我只能推测为什么"猫头鹰旋转木马"类不是为您输出的，而是似乎适用于许多其他人。
解决方法是运行您已经尝试更改类的 JS(但在修复问题 1 的情况下执行此操作(，使用我们的预处理函数来添加类，或者甚至可能只是通过视图接口添加类(因为它似乎是从视图输出的(。