Jekyll - show images & text in slider - yaml

Question

I am using Bootstrap-Carousel.
Unfortunately, the data from front-matter is not being rendered.
index.html:
...
carousel:
a:
image: home/athenaBeta.jpeg
text: random text 1
b:
image: home/transport.jpeg
text: |
random text 2
c:
image: home/coffee.jpeg
text: |
random text 3
---
{% include hero-carousel.html %}
...
hero-carousel.html:
<div id="carousel" class="carousel slide" data-ride="carousel" pause="false">
<div class="carousel-inner text-center">
{% for news in page.carousel %}
{% capture image %}
{% assign img = news.image %}
{% endcapture %}
<div class="item img-cover img-fixed {% if forloop.index == 0 %}active{% endif %}" style="background-image:url({{ image }})">
<h2>{{ news.text }}</h2>
</div>
{% capture i %}{{ i | plus:1 }}{% endcapture %}
{% endfor %}
</div>
<a class="left carousel-control" href="#carousel" role="button" data-slide="prev">
<span class="fa glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel" role="button" data-slide="next">
<span class="fa glyphicon-chevron-right"></span>
</a>
<a class="arrow-down" href="#content">
<span class="fa glyphicon-chevron-down"></span>
</a>
</div>
It renders the three slides, however, none of the images or text is rendered. The output I get in browser is as below:
<div id="carousel" class="carousel slide" data-ride="carousel" pause="false">
<div class="carousel-inner text-center">
<div class="item img-cover img-fixed " style="background-image:url(
)">
<h2></h2>
</div>
<div class="item img-cover img-fixed " style="background-image:url(
)">
<h2></h2>
</div>
<div class="item img-cover img-fixed " style="background-image:url()">
<h2></h2>
</div>
</div>
<a class="left carousel-control" href="#carousel" role="button" data-slide="prev">
<span class="fa glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel" role="button" data-slide="next">
<span class="fa glyphicon-chevron-right"></span>
</a>
<a class="arrow-down" href="#content">
<span class="fa glyphicon-chevron-down"></span>
</a>
</div>

Answer 1

When you loop in page.caroussel, you receive things like :
{{ news | inspect }}
==> ["a", {"image"=>"home/athenaBeta.jpeg", "text"=>"random text 1"}]
which is an array containing two elements.
In order to reach your image, you can do {% assign img = news[1].image %}, but you'd better refactor a little :
...
carousel:
- image: home/athenaBeta.jpeg
text: random text 1
- image: home/transport.jpeg
text: |
random text 2
- image: home/coffee.jpeg
text: |
random text 3
---
<div id="carousel" class="carousel slide" data-ride="carousel" pause="false">
<div class="carousel-inner text-center">
{% for news in page.carousel %}
<div class="item img-cover img-fixed {% if forloop.first %}active{% endif %}" style="background-image:url('{{ news.image }}')">
<h2>{{ news.text }}</h2>
</div>
{% endfor %}
</div>