Skip to content
Grav 2.0 is officially stable. Read the announcement →

Community guidelines

Please keep discussions civil and on-topic. Repeated violations may lead to a temporary ban.

Content & Markdown

Building an Imageslide but with Modules

Started by David Schad 2 years ago · 2 replies · 58 views
2 years ago

Hey, so i´m currently working on a Website and I want to implement an imageslider but instead of images I want it to display module so you can add "news" or something like that. It should be infinite.
My current html Twig is:

<div class="swiper-container2">
<div class="swiper-wrapper2">
{% for module in page.collection() %}
<div class="swiper-slide2">
{{ module.content|raw }}
</div>
{% endfor %}
</div>
<div class="swiper-pagination2"></div>
<div class="swiper-button-next2"></div>
<div class="swiper-button-prev2"></div>
</div>

<script>
var swiper = new Swiper('.swiper-container2', {
loop: true,
pagination: {
el: '.swiper-pagination2',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next2',
prevEl: '.swiper-button-prev2',
},
});
</script>

The idea is, that i check for modules that fit and it should display every module in a seperate slide.
My problem is, it doesnt show me any Modules and when i try to debug it with:
{% else %}
<p>No Modules found</p>
it always says "No Modules found".

Anyone know how to fix this? or know what i am doing wrong?
Thanks for the help.

2 years ago
HTML
<div class="swiper-container2">
    <div class="swiper-wrapper2">
        {% for module in page.collection() %}
    {{ module.content|raw }}
{% else %}
    <p>Keine Module gefunden.</p>
{% endfor %}

    </div>
    <div class="swiper-pagination2"></div>
    <div class="swiper-button-next2"></div>
    <div class="swiper-button-prev2"></div>
</div>

{{ dump(page.collection()) }}

<script>
  var swiper = new Swiper('.swiper-container2', {
    loop: true,
    pagination: {
      el: '.swiper-pagination2',
      clickable: true,
    },
    navigation: {
      nextEl: '.swiper-button-next2',
      prevEl: '.swiper-button-prev2',
    },
  });
</script>

2 years ago

What's your folder structure and what do you get with {{ dump(page.collection()) }}?

Suggested topics

Topic Participants Replies Views Activity
Content & Markdown · by Jochen, 8 months ago
6 93 8 months ago
Content & Markdown · by Ton Haarmans, 1 year ago
10 184 1 year ago
Content & Markdown · by Jan L'Am, 1 year ago
4 145 1 year ago
Content & Markdown · by Leonardo, 1 year ago
3 58 1 year ago
Content & Markdown · by belthasar, 1 year ago
4 253 1 year ago