Owl Carousel not inline

Question

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

Heterophyte

Can you provide the jquery code used in the drupal 7 – Sondrasone

I'll edit my post with the various links to the js files including jQuery. You can also view source. – Heterophyte

@Sondrasone see edited post for links – Heterophyte

I need the code that you used for showing the carousel in jquery for owl – Sondrasone

@Sondrasone I have no idea what jquery is used – Heterophyte

@Sondrasone is there some js I can write that will replace "owl-carousel-page_12" to "owl-carousel" and/or change "owl-carousel-block2" to "owl-carousel" – Heterophyte

The D7 site you link to has errors in the console. Which owl carousel module are you using? (there are 2 on drupal.org). – Unicef

@Unicef Owl Carousel v2.3.4 – Heterophyte

I meant which D7 module? this one or this one... Or are you implementing the owl carousel library yourself without a drupal module? – Unicef

@Unicef this one - drupal.org/project/owlcarousel 7.x1-6 – Heterophyte

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

Unicef

Thanks. I fixed the google fonts to load https. As far as ctools page manager, it turns out that disabling that does not fix my issue. It could be part of the fix. I am trying JS injector to use js to replace "owl-carousel-block2" with "owl-carousel" class but have not been successful. – Heterophyte

Have you tried the other 2 ways to add the class that i mention above? – Unicef

tried injecting JS, tried adding class in my block version and my page version. Not totally sure how I can add via views interface perhaps that's the same thing I've already tried. – Heterophyte