Using wagtail(django) I created a carrousel that serves all my media content. The user can select 1-3 columns (three templates accordingly), which displays a carousel if media content >1, else only the image/video.
As for the 2-3 columns display can be small for some, I added a FullScreen toggle button, if the user wishes to. This works well... almost as I have two issues with passing wagtail blocs into CSS/JS loops:
- Fullscreen toggle buttons. If the block has more than 2-3 carousels not all will function.
Ex: With 3 carousels, one per column, only the right and the left one are clickables.
With 6 carousels (2*3 block), only the left ones and the upper central one are clickable).
How should I pass the JS script to the given button (with some kind of _{{ block.id }}...??) so the carousel full screen buttons can be attributed to the specific instance?
- Indicators : The indictors are displayed properly, until the second slide is activated. Then, the indicator of the first slide appears in the boostrap default style. The other slides function as expected with their override style and hover-color for the active element.
I tried to add condition {% elif forloop.counter == 0/2/-1 %} neither worked.
Any advise on how to make it function?
Here's my code:
- carousel_block.html
and in case you find it useful, here's the block templates.
- three_columns_block.html
- single_column_block.html
For the sake of brevity, I didn't add the stream_field.html which populates the carousel data in the columns templates. Kindly advised if needed.
Any input, consideration is highly appreciated.
carousel_block.html
{% load wagtailcore_tags wagtailimages_tags wagtailembeds_tags %}
<head>
<!--I added the head as I didn't know how to pass only links and scripts from the base.html-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<style>
.carousel-item {
object-fit: cover;
object-position: center!important;
min-height: 50vh;
overflow: hidden;
vertical-align: middle!important;
}
.carousel-indicators li.dactive, .carousel-indicators li.active {
width: 11px;
height: 11px;
border-radius: 50%;
margin: 2px 4px;
border: 2px solid black;
}
.carousel-indicators li {
border: 1px solid #475c6f;
}
.carousel-indicators li.active {
background: #20b0b9;
border-color: #20b0b9;
}
#myDiv.fullscreen{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 9998;
}
.but {
top:0;
left:0;
position: absolute;
background-color: #f5f;
z-index: 9999;
}
#myDiv{background:#fff;}
</style>
</head>
<article>
<div class="row">
<div class="">
<div id="myDiv">
{% if block.block_type == 'carousel' %}
{% if block.value|length > 1 %}
<div id="carouselExampleIndicators_{{ block.id }}" class="carousel slide zoom" data-bs-ride="carousel">
<ol class="carousel-indicators">
{% for item in block.value %}
<li data-bs-target="#carouselExampleIndicators_{{ block.id }}"
data-bs-slide-to="{{ forloop.counter0 }}" aria-label="Slide {{ forloop.counter }}"
{% if forloop.counter == 1 %} class="active" aria-current="true" {% else %} class="dactive" {% endif %}>
</li>
{% endfor %}
</ol>
{% endif %}
<div class="carousel-inner">
{% for item in block.value %}
<div class="carousel-item{% if forloop.counter == 1 %} active{% endif %}">
<div class="d-block w-90">
{% if item.block_type == 'image' %}
{% image item.value.image original as img %}
<img src="{{ img.url }}" alt="{{ img.alt }}">
{% if item.value.caption %}
<div class="carousel-caption d-none d-md-block overlay1 neonText">
{{ item.value.caption }}</div>
{% endif %}
{% elif item.block_type == 'video' %}
{{ item.value }}
{% endif %}
</div>
<button type="button" class="btn btn-default but btn-sm">
<span class="glyphicon glyphicon-fullscreen"></span> Fullscreen
</button>
<i class="bi bi-fullscreen"></i>
</div>
{% endfor %}
</div>
{% if block.value|length > 1 %}
<a class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators_{{ block.id }}" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators_{{ block.id }}" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</a>
{% endif %}
</div>
{% endif %}
</div>
</div>
</div>
</article>
<script>
$('button').click(function(){
$('#myDiv').toggleClass('fullscreen');
});
</script>single_column_block.html
{% load wagtailcore_tags wagtailembeds_tags %}
<div class="row my-3">
<div class="col zoom-none">
{% for block in self.single_column %}
<div class="card mb-md-3 single">
{% include_block block %}
</div>
{% endfor %}
</div>
</div>three_columns_block.html
{% load wagtailcore_tags wagtailembeds_tags %}
<div class="row my-3">
<div class="col-md-4">
{% for block in self.left_column %}
<div class="card">
{% include_block block %}
</div>
{% endfor %}
</div>
<div class="col-md-4">
{% for block in self.middle_column %}
<div class="card">
{% include_block block %}
</div>
{% endfor %}
</div>
<div class="col-md-4">
{% for block in self.right_column %}
<div class="card">
{% include_block block %}
</div>
{% endfor %}
</div>
</div>