Owl Carousel not inline

2019-08-31 02:09发布

问题:

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.

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

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

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

How can I get these inline?

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.

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>

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:

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"

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

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

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?

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).