I currently have a straightforward bootstrap 4
(beta-v2) carousel set up:
<div id="carouselSteam" class="carousel slide" data-interval="false">
<div class="carousel-inner">
{% for key, value in results.items %}
{% if forloop.counter == 1 %}
<div class="carousel-item active">
{% include "games/result_table.html" with key=key value=value %}
</div>
{% else %}
<div class="carousel-item">
{% include "games/result_table.html" with key=key value=value %}
</div>
{% endif %}
{% endfor %}
</div>
<a class="carousel-control-prev" href="#carouselSteam" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselSteam" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
The concern is that the carousel-inner
section can get lengthy due to the table it contains. Right now, the controls are positioned halfway down the carousel; I am looking to move them closer to the top (around 20% from the top) - is there a method to achieve this desired positioning?