猫头鹰轮播不在线 [英] Owl Carousel not inline

问题描述

我似乎无法让猫头鹰轮播在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

如何获得这些内联?

忘记提及在父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加载google字体会导致错误，从而破坏JS.
特别是" http://fonts.googleapis.com/css?family=Roboto:400,300,700,500 "

Issue 1. (the JS)
You have linked to a page that loads via HTTPS, but you are loading your google fonts over HTTP resulting in an error which breaks the JS.
specifically "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

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

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

问题2.(CSS)
猫头鹰轮播CSS已加载，但未应用.
如您所说，这似乎是因为猫头鹰轮播块没有猫头鹰轮播"类.
您可以通过在开发工具中将该类简单地添加到块中来进行检查.
关于 HERE 似乎存在问题，其中提到与工具页面冲突经理，虽然它似乎与版本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修复此问题)，请使用预处理功能添加该类，或者甚至只是通过views接口添加该类(因为它似乎是从视图输出的.)

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屋！