You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<!-- Carousel folder. Makes a carousel with every image inside the folder you've given as an inner argument-->
{{ $allImages := $.Page.Resources.ByType "image" }}
{{ $imagesInFolder := $allImages.Match (printf "%s/*" .Inner) }}
{{ $carouselFID := .Get "id" | default "tigidik" }}
<div id="{{ $carouselFID }}" class="carousel carousel-dark slide">
<div class="carousel-indicators" style="margin-bottom: -1rem !important;">
{{ range $index, $img := $imagesInFolder }}
<button type="button" data-bs-target="#{{ $carouselFID }}" data-bs-slide-to="{{ $index }}" {{ if eq $index 0 }}class="active" aria-current="true"{{ end }} aria-label="Slide {{ add $index 1 }}"></button>
{{ end }}
</div>
<div class="carousel-inner">
{{ range $index, $img := $imagesInFolder }}
{{ $img := $img.Resize "1200x q100 Lanczos" }}
{{ $img := $img.Fill "1200x900 q85 Lanczos" }} <!-- scaling and cropping to fit 1200x900 while maintaining original proportions -->
<div class="carousel-item {{ if eq $index 0 }}active{{ end }}">
<img src="{{ $img.RelPermalink }}" class="d-block w-100" loading="lazy" alt="carousel is broken">
<p class="dot-cs">
<b><a href="{{ $img }}">· </a></b>
</p>
</div>
{{ end }}
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#{{ $carouselFID }}" data-bs-slide="prev" style="left: -30px !important;">
<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="#{{ $carouselFID }}" data-bs-slide="next" style="right: -30px !important;">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
This is a pretty much default bootstrap carousel with a bit of hugo html templating and custom styles.
After updating from 5.3.1 to 5.3.2 all my carousels stopped working. Buttons have become unresponsive.
I think I found a bug. Turns out, the carousel stops working if you assign a numeric value to div id= attribute. All my ids are numeric, so basically my whole website is broken on the 5.3.2 version. However, it worked on 5.3.1.
I checked it with codepen, and you can see a test case below.
Are we asked to do something here ? I can't see how to handle it properly ? Should we mention it in the migration guide or something ? Or maybe we can safely close this issue ?
Prerequisites
Describe the issue
I have a following shortcode in my project:
This is a pretty much default bootstrap carousel with a bit of hugo html templating and custom styles.
After updating from 5.3.1 to 5.3.2 all my carousels stopped working. Buttons have become unresponsive.
I think I found a bug. Turns out, the carousel stops working if you assign a numeric value to
div id=
attribute. All my ids are numeric, so basically my whole website is broken on the 5.3.2 version. However, it worked on 5.3.1.I checked it with codepen, and you can see a test case below.
What operating system(s) are you seeing the problem on?
macOS
What browser(s) are you seeing the problem on?
Safari
What version of Bootstrap are you using?
5.3.2
The text was updated successfully, but these errors were encountered: