carousel doesn't appear in modular

cpamcom commented 7 years ago

The carousel does not appear in the modulars, even if both Shortcode Owl Carousel and Shortcode Core are enabled...

cpamcom commented 7 years ago

capture du 2017-03-23 22-58-57 Fetch Failed: $(...).owlCarousel is not a function

cpamcom commented 7 years ago

capture du 2017-03-23 23-02-08

finanalyst commented 7 years ago

I have encountered a similar problem. I am trying to add a carousel to a Big Picture skeleton. This uses a modular page at the top level. I have a twig file called carousel.html.twig file that is "called" by modular file. It contains:

{% set subpages =  page.find('/home').header.content.order.custom %}
{% set nextSubPageIndex = -1 %}
{% for subpage in subpages %}
    {% if page.folder == subpage %}
        {% set nextSubPageIndex = loop.index %}
    {% endif %}
{% endfor %}
<section id="{{ page.folder|replace({'_': ''}) }}" class="info main style1 dark fullscreen" style="background-image: url('{{ url('theme://assets/css/images/overlay.png', true) }}'), url('{{ page.media[header.background_image].url }}');
">TypeError: $(...).owlCarousel is not a function[Learn More]  en-gb:146:9
    {{ content }}
        {% if subpages[nextSubPageIndex] %}
            <a href="#{{ subpages[nextSubPageIndex]|replace({'_': ''}) }}" class="button style2 down anchored">More</a>
        {% endif %}
</section>

The following is the contents of
_history/carousel.md

---
title: History
content:
    items: @self.children
    order:
      by: default
      dir: asc
background_image: 
process:
  twig: true
markdown:
  escape_markup: false
---
[owl-carousel items=10 margin=10 loop=true nav=true]
{% for p in page.collection() %}
<div class="content container 75%">
<header>
<h4>{{ p.header.heading }}</h4>
</header>
{{ p.content }}
</div>
{% endfor %}
[/owl-carousel]

This generates the following html (simple md files are placed in three subdirectories, eg. _history/01.a/intro.md )

<section id="history" class="info main style1 dark fullscreen" style="background-image: url('http://gandalf/hkbahai-2017-bp/user/themes/hkbahai/assets/css/images/overlay.png'), url('');
">
<div class="owl-carousel owl-theme" id="owl-d83729ecb9"> 
<div class="content container 75%">
<header><h4>ONE</h4>
</header>
<p>first</p>
</div>
<div class="content container 75%">
<header><h4>TWO</h4>
</header>
<p>second</p>
</div>
<div class="content container 75%">
<header><h4>THREE</h4>
</header>
<p>third</p>
</div>
</div>
<script>
    $(document).ready(function(){
        $("#owl-d83729ecb9").owlCarousel({
                        items: 10,
                        margin: 10,
                        loop: true,
                        nav: true,
                    });
    });
</script>
<a href="#location" class="button style2 down anchored">More</a>        
</section>

The html code appears to be correct, but no carousel is visible and in the CSS error console (available in Firefox), the following line appears

TypeError: $(...).owlCarousel is not a function[Learn More]  en-gb:146:9

I don't know quite where to start to narrow down the problem.

Regards

finanalyst commented 7 years ago

a) ignore the string starting TypeError in the twig file above. It was a spurious paste error that I did not see when posting. It isn't in the twig file and is not the reason for the problem.

Opened new issue as the problem seems to be Theme/framework related, not modular related

laszlo-csibrany commented 4 years ago

Hello,

I experience the same issue. I added the code the normal blog post page. Jquery source is above the owl.js, the element ID is also correct.

Any ideas?

Thank you, László

Sogl commented 4 years ago

I have the same problem, no js and css are loaded on the page if I use modular...

my code:

[owl-carousel items=1 margin=10 loop=true autoplay=true autoplayHoverPause=true nav=true]
![](family.png)
![](fishing.jpg)
[/owl-carousel]

On non-modular I see error:

owlCarousel is not a function

<head> modified to deffered loading

getgrav / grav-plugin-shortcode-owl-carousel

carousel doesn't appear in modular #6