Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

carousel doesn't appear in modular #6

Open
cpamcom opened this issue Mar 23, 2017 · 6 comments
Open

carousel doesn't appear in modular #6

cpamcom opened this issue Mar 23, 2017 · 6 comments
Labels
fixed

Comments

@cpamcom
Copy link

cpamcom commented Mar 23, 2017

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

cpamcom commented Mar 23, 2017

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

@cpamcom
Copy link
Author

cpamcom commented Mar 23, 2017

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

@finanalyst
Copy link

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
Copy link

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

@rhukster rhukster added the fixed label May 7, 2019
@csbrny
Copy link

csbrny commented Nov 30, 2019

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
Copy link

Sogl commented Nov 30, 2019 •
edited
Loading

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
fixed
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@finanalyst @csbrny @rhukster @Sogl @cpamcom