I have the following code as carousel in my HTML theme:
HTML
<!-- Carousel Start -->
<div class="container-fluid p-0 wow fadeIn" data-wow-delay="0.1s">
<div id="header-carousel" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="w-100" src="img/carousel-1.jpg" alt="Image">
<div class="carousel-caption">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<h1 class="display-1 text-white mb-5 animated slideInDown">Solidarisch. Lokal. Gesund. Lecker.</h1>
<a href="" class="btn btn-primary py-sm-3 px-sm-4">Explore More</a>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<img class="w-100" src="img/carousel-2.jpg" alt="Image">
<div class="carousel-caption">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-7">
<h1 class="display-1 text-white mb-5 animated slideInDown">Was ist eine Solawi?</h1>
<a href="" class="btn btn-primary py-sm-3 px-sm-4">Explore More</a>
</div>
</div>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#header-carousel"
data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#header-carousel"
data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
<!-- Carousel End -->
I wanna do a modular with this code above.
So I has done the folloding code in "user/pages/modular/carousel.md":
YAML
---
title: Carousel
content:
items:
- image:
label: Image 1
type: filepicker
folder: '@self'
preview_images: true
accept:
- image/*
title:
label: Title 1
type: text
caption:
label: Caption 1
type: textarea
- image:
label: Image 2
type: filepicker
folder: '@self'
preview_images: true
accept:
- image/*
title:
label: Title 2
type: text
caption:
label: Caption 2
type: textarea
---
Then I craeted in "user/themes/mytheme/modular/carousel.html.twig":
TWIG
{% set content = page.content %}
{% set items = content.items %}
{% set id = 'header-carousel-' ~ random_string(8) %}
{% set delay = 0.1 %}
<div class="container-fluid p-0 wow fadeIn" data-wow-delay="{{ delay }}s">
<div id="{{ id }}" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
{% for item in items %}
{% set active = (loop.index == 1) ? 'active' : '' %}
<div class="carousel-item {{ active }}">
<img class="w-100" src="{{ item.image.url }}" alt="{{ item.image.alt }}">
<div class="carousel-caption">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<h1 class="display-1 text-white mb-5 animated slideInDown">{{ item.title }}</h1>
<p>{{ item.caption }}</p>
<a href="" class="btn btn-primary py-sm-3 px-sm-4">Explore More</a>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#{{ id }}" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#{{ id }}" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
In my "user/themes/mytheme/templates/home.html.twig" I put the following code into the template:
TWIG
{% block carousel %}
<!-- Carousel Start -->
{% include 'user/themes/mytheme/templates/modular/carousel.html.twig' %}
<!-- Carousel End -->
{% endblock %}
Now the error message from Grav told me:
Template "user/themes/solawi/templates/modular/carousel.html.twig" is not defined in "home.html.twig" at line 49.
What is missing? What is wrong?