猫头鹰轮播不内联 [英] Owl Carousel not inline

问题描述

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

I cannot seem to get owl carousel to work in drupal 7. I thought it might be a conflict with Chaos tools but now I'm not sure. I had zero issues with it functioning as expected in Drupal 8 but my client needs it in Drupal 7.

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

I've tried it as a Block and as a Page. Currently, it stacks the content vertically instead of 3 inline as I hoped.

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

Here is the working Drupal 8 link to show what I'd like to achieve: https://bryanbowers.me/cms/slideshow

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

Here is the Drupal 7 version not working: https://bryanbowers.me/seven/?q=node/5

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

How can I get these inline?

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

forgot to mention that in the parent div it appends a class="owl-carousel-page_12" in dev tools if I remove -page_12, the carousel renders inline.

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

I can't seem to find how to prevent this class from being added. I also tried to write css for class="owl-carousel-page_12" to match css for "owl-carousel" without success.

<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 脚本来替换类，但我得到的东西不正确，或者它不会覆盖.希望我能阻止它完全编写自定义类.

I've tried a number of jquery and js scripts in footer to replace class but I'm getting things incorrect or it won't override. Wish I could prevent it from writing the custom class altogether.

/// 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);
    });
};

推荐答案

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

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

Fix:
Either load your page via HTTP or load your fonts via HTTPS

执行上述操作将使 owl carousel JS 正常工作(但它仍然看起来不正确).

Doing the above will get the owl carousel JS working (but it still wont look right).

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

Issue 2. (the CSS)
The owl carousel CSS is loaded but not applied.
As you said, this seems to be because the owl carousel block does not have the "owl-carousel" class.
You can check this by simply adding that class to the block in dev tools.
There seems to be an issue about this HERE which mentions a conflict with ctools page manager, though it seems to relate to version 7.x-2.0-alpha0, but you don't seem to be using that module (judging from the module README.txt which your site serves). Are you using ctools page manager?

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

If you are using version 7.x-1.6 I can only speculate why the "owl-carousel" class is not being output for you but seems to work for so many other people.
A work around would be to either run the JS you have already tried to alter the class (but do it with issue 1 fixed), make use us a preprocess function to add the class, or maybe even just adding the class via the views interface (as it seems to be output from a view).

这篇关于猫头鹰轮播不内联的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！