Frontmatter:
resources:
- src: carousel/slide1.jpg
name: slide
title: slide 1
- src: carousel/slide2.jpg
name: slide
title: slide 2
- src: carousel/slide3.jpg
name: slide
title: slide 3
shortcode carousel.html:
{{ $slides := ( $.Page.Resources.Match "slide*" ) }}
<div class="section" id="carousel">
<div class="container">
{{ with .Get "title" }}
<div class="title">
<h4>{{ . }}</h4>
</div>
{{ end }}
<div class="row justify-content-center">
<div class="col">
<div id="carouselIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
{{ range $key, $value := $slides }}
{{ $active := "" }}
{{ if eq $key 0 }}
{{ $active = "active" }}
{{ end }}
<li data-target="#carouselIndicators" data-slide-to="{{ $key }}" class="{{ $active }}"></li>
{{ end }}
</ol>
<div class="carousel-inner" role="listbox">
{{ range $key, $value := $slides }}
{{ $active := "" }}
{{ if eq $key 0 }}
{{ $active = "active" }}
{{ end }}
<div class="carousel-item {{ $active}} ">
<img class="d-block" src="{{ .RelPermalink }}" alt="{{ .Name }}">
<div class="carousel-caption d-none d-md-block">
<h5>{{ .Title }} </h5>
</div>
</div>
{{ end }}
</div>
<a class="carousel-control-prev" href="#carouselIndicators" role="button" data-slide="prev">
<i class="now-ui-icons arrows-1_minimal-left"></i>
</a>
<a class="carousel-control-next" href="#carouselIndicators" role="button" data-slide="next">
<i class="now-ui-icons arrows-1_minimal-right"></i>
</a>
</div>
</div>
</div>
</div>
</div>
Usage:
{{% carousel title="optional" %}}
Hope it helps
7 Likes
Royi
December 14, 2020, 1:52pm
2
Do you have example site to show this?
Given I have a folder with images 001.png, 002.png, …, 020.png.
Sure, go to this page and search for carousel: https://brunoamaral.eu/page/elements/
Royi
December 14, 2020, 3:03pm
4
May I ask you to adapt the Carousel with captions from https://getbootstrap.com/docs/4.5/components/carousel/ ?
The code above already uses the title of each slide as a caption.
Royi
December 14, 2020, 3:28pm
7
I guess I don’t understand the difference between the title if the whole div (From {{ with .Get "title" }}) and <h5>{{ .Title }} </h5>.
It makes sense the top is from he first and the 2nd for the image itself.
1 Like
Royi
December 14, 2020, 10:37pm
8
The code doesn’t work on the current Hugo (Version 0.79.0).li elements:
<ol class="bootstrapiso carousel-indicators">
{{ range $key, $value := $slides }}
{{ $active := "" }}
{{ if eq $key 0 }}
{{ $active = "active" }}
{{ end }}
<li data-target="#carouselIndicators" data-slide-to="{{ $key }}" class="bootstrapiso {{ $active }}"></li>
{{ end }}
</ol>
<div class="bootstrapiso carousel-inner" role="listbox">
{{ range $key, $value := $slides }}
{{ $active := "" }}
{{ if eq $key 0 }}
{{ $active = "active" }}
{{ end }}
<div class="bootstrapiso carousel-item {{ $active}} ">
<img class="bootstrapiso d-block" src="{{ .RelPermalink }}" alt="{{ .Name }}">
<div class="bootstrapiso carousel-caption d-none d-md-block">
<h5>{{ .Title }} </h5>
</div>
</div>
{{ end }}
</div>
That’s odd, because it looks like the one I have running right now with 0.79.
{{ $slides := ( $.Page.Resources.Match "slide*" ) }}
{{ with .Get "title" }}
<h4>{{ . }}</h4>
{{ end }}
<div class="row justify-content-center">
<div class="col">
<div id="carouselIndicators" class="carousel slide" data-ride="false" data-interval="false" data-touch="true" data-pause="hover" >
<ol class="carousel-indicators">
{{ range $key, $value := $slides }}
{{ $active := "" }}
{{ if eq $key 0 }}
{{ $active = "active" }}
{{ end }}
<li data-target="#carouselIndicators" data-slide-to="{{ $key }}" class="{{ $active }}"></li>
{{ end }}
</ol>
<div class="carousel-inner" role="listbox">
{{ range $key, $value := $slides }}
{{ $active := "" }}
{{ if eq $key 0 }}
{{ $active = "active" }}
{{ end }}
<div class="carousel-item {{ $active}} ">
<img class="d-block" src="{{ .RelPermalink }}" alt="{{ .Name }}" loading="lazy">
<div class="carousel-caption d-none d-md-block">
<h5>{{ .Title }} </h5>
</div>
</div>
{{ end }}
</div>
<a class="carousel-control-prev" href="#carouselIndicators" role="button" data-slide="prev">
<i class="now-ui-icons arrows-1_minimal-left"></i>
</a>
<a class="carousel-control-next" href="#carouselIndicators" role="button" data-slide="next">
<i class="now-ui-icons arrows-1_minimal-right"></i>
</a>
</div>
</div>
</div>
Royi
December 15, 2020, 6:13pm
10
Could it be something tricky with the Forty theme ?
yes it could be related to that. Do you have any code you can share?
Royi
December 18, 2020, 12:29am
12
Well,Bootstrap built in.How to isolate bootstrap CSS and JavaScript to a part of the html page and How to Isolate Bootstrap 4.4.1 CSS to Avoid Conflicts ).
Then I just used your code inside a shortcode.
If you want more code let me know how to contact you.
That is the problem.
I glanced over the two links you showed and it looks like they create a new css class where bootstrap gets “hosted”.
You can try to change my code to include that new class, it might work. With such a big change to the initial structure it’s no wonder you are facing issues. And I would be worried that this might just be the tip of the iceberg in terms of conflicts.
My suggestion, try to find a standalone slideshow, that does not need bootstrap, and adapt the html i used to see if it works.
Royi
December 18, 2020, 12:42am
14
I did add the bootstrapiso class to your code.
Unfortunately I haven’t find a standalone slider with the nav controls, indicators and captions as in the Bootstrap carousel.
take a look at https://splidejs.com/
you may have to make some compromises in terms of what you need and what can be achieved with just the time and development you have at hand.
2 Likes
