# Shortcode for bootstrap 4 carousel using page resources

**URL:** <https://discourse.gohugo.io/t/shortcode-for-bootstrap-4-carousel-using-page-resources/15431>\
**Category:** tips & tricks\
**Created:** [November 21, 2018, 10:05pm UTC](https://discourse.gohugo.io/t/shortcode-for-bootstrap-4-carousel-using-page-resources/15431 "2018-11-21T22:05:57Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![brunoamaral](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/brunoamaral/32/21144_2.png) [@brunoamaral](https://discourse.gohugo.io/u/brunoamaral)\
**Post date:** [November 21, 2018, 10:05pm UTC](https://discourse.gohugo.io/t/shortcode-for-bootstrap-4-carousel-using-page-resources/15431/1 "2018-11-21T22:05:57Z")

</div>

Frontmatter:

```auto
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:

```auto
{{ $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:

```auto
{{% carousel title="optional" %}}

```

Hope it helps 🙂

---

<div class="post-metadata">

**Author:** ![Royi](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/royi/32/12954_2.png) [@Royi](https://discourse.gohugo.io/u/Royi)\
**Post date:** [December 14, 2020, 1:52pm UTC](https://discourse.gohugo.io/t/shortcode-for-bootstrap-4-carousel-using-page-resources/15431/2 "2020-12-14T13:52:32Z")

</div>

Do you have example site to show this?

Given I have a folder with images `001.png`, `002.png`, …, `020.png`.  
How can I use this?

---

<div class="post-metadata">

**Author:** ![brunoamaral](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/brunoamaral/32/21144_2.png) [@brunoamaral](https://discourse.gohugo.io/u/brunoamaral)\
**Post date:** [December 14, 2020, 2:55pm UTC](https://discourse.gohugo.io/t/shortcode-for-bootstrap-4-carousel-using-page-resources/15431/3 "2020-12-14T14:55:17Z")

</div>

Sure, go to this page and search for carousel: [https://brunoamaral.eu/page/elements/](https://brunoamaral.eu/page/elements/)

---

<div class="post-metadata">

**Author:** ![Royi](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/royi/32/12954_2.png) [@Royi](https://discourse.gohugo.io/u/Royi)\
**Post date:** [December 14, 2020, 3:03pm UTC](https://discourse.gohugo.io/t/shortcode-for-bootstrap-4-carousel-using-page-resources/15431/4 "2020-12-14T15:03:33Z")

</div>

May I ask you to adapt the Carousel with captions from [https://getbootstrap.com/docs/4.5/components/carousel/](https://getbootstrap.com/docs/4.5/components/carousel/)?

---

<div class="post-metadata">

**Author:** ![brunoamaral](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/brunoamaral/32/21144_2.png) [@brunoamaral](https://discourse.gohugo.io/u/brunoamaral)\
**Post date:** [December 14, 2020, 3:12pm UTC](https://discourse.gohugo.io/t/shortcode-for-bootstrap-4-carousel-using-page-resources/15431/5 "2020-12-14T15:12:26Z")

</div>

The code above already uses the title of each slide as a caption.

---

<div class="post-metadata">

**Author:** ![Royi](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/royi/32/12954_2.png) [@Royi](https://discourse.gohugo.io/u/Royi)\
**Post date:** [December 14, 2020, 3:28pm UTC](https://discourse.gohugo.io/t/shortcode-for-bootstrap-4-carousel-using-page-resources/15431/7 "2020-12-14T15:28:11Z")

</div>

I guess I don’t understand the difference between the title if the whole `div` (From `{{ with .Get "title" }}`) and `<h5>{{ .Title }} </h5>`.  
Which one is the title of the short code and which is the title of the slide.

It makes sense the top is from he first and the 2nd for the image itself.

---

<div class="post-metadata">

**Author:** ![Royi](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/royi/32/12954_2.png) [@Royi](https://discourse.gohugo.io/u/Royi)\
**Post date:** [December 14, 2020, 10:37pm UTC](https://discourse.gohugo.io/t/shortcode-for-bootstrap-4-carousel-using-page-resources/15431/8 "2020-12-14T22:37:02Z")

</div>

The code doesn’t work on the current Hugo (Version `0.79.0`).  
It seems this code doesn’t generate the `li` elements:

```auto
<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>

```

---

<div class="post-metadata">

**Author:** ![brunoamaral](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/brunoamaral/32/21144_2.png) [@brunoamaral](https://discourse.gohugo.io/u/brunoamaral)\
**Post date:** [December 15, 2020, 12:48am UTC](https://discourse.gohugo.io/t/shortcode-for-bootstrap-4-carousel-using-page-resources/15431/9 "2020-12-15T00:48:26Z")

</div>

That’s odd, because it looks like the one I have running right now with 0.79.

```auto
{{ $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>

```

---

<div class="post-metadata">

**Author:** ![Royi](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/royi/32/12954_2.png) [@Royi](https://discourse.gohugo.io/u/Royi)\
**Post date:** [December 15, 2020, 6:13pm UTC](https://discourse.gohugo.io/t/shortcode-for-bootstrap-4-carousel-using-page-resources/15431/10 "2020-12-15T18:13:10Z")

</div>

Could it be something tricky with the [Forty theme](https://themes.gohugo.io/forty/)?  
It just seems that generation of the elements is wrong.

---

<div class="post-metadata">

**Author:** ![brunoamaral](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/brunoamaral/32/21144_2.png) [@brunoamaral](https://discourse.gohugo.io/u/brunoamaral)\
**Post date:** [December 18, 2020, 12:16am UTC](https://discourse.gohugo.io/t/shortcode-for-bootstrap-4-carousel-using-page-resources/15431/11 "2020-12-18T00:16:40Z")

</div>

yes it could be related to that. Do you have any code you can share?

---

<div class="post-metadata">

**Author:** ![Royi](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/royi/32/12954_2.png) [@Royi](https://discourse.gohugo.io/u/Royi)\
**Post date:** [December 18, 2020, 12:29am UTC](https://discourse.gohugo.io/t/shortcode-for-bootstrap-4-carousel-using-page-resources/15431/12 "2020-12-18T00:29:37Z")

</div>

Well,  
The Forty theme doesn’t have `Bootstrap` built in.  
Hence I added Isolated Bootstrap (See [How to isolate bootstrap CSS and JavaScript to a part of the html page](https://stackoverflow.com/questions/57219361) and [How to Isolate Bootstrap 4.4.1 CSS to Avoid Conflicts](https://github.com/cryptoapi/Isolate-Bootstrap-4.1-CSS-Themes)).

Then I just used your code inside a `shortcode`.  
The output wasn’t as expected.

If you want more code let me know how to contact you.  
I’d be happy to see how it could be solved!

---

<div class="post-metadata">

**Author:** ![brunoamaral](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/brunoamaral/32/21144_2.png) [@brunoamaral](https://discourse.gohugo.io/u/brunoamaral)\
**Post date:** [December 18, 2020, 12:35am UTC](https://discourse.gohugo.io/t/shortcode-for-bootstrap-4-carousel-using-page-resources/15431/13 "2020-12-18T00:35:10Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Royi](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/royi/32/12954_2.png) [@Royi](https://discourse.gohugo.io/u/Royi)\
**Post date:** [December 18, 2020, 12:42am UTC](https://discourse.gohugo.io/t/shortcode-for-bootstrap-4-carousel-using-page-resources/15431/14 "2020-12-18T00:42:33Z")

</div>

I did add the `bootstrapiso` class to your code.  
It shows the slides, yet the nav controls and the indicators are not aligned with the slide itself.  
Something about the positioning doesn’t work well.

Unfortunately I haven’t find a standalone slider with the nav controls, indicators and captions as in the Bootstrap carousel.

---

<div class="post-metadata">

**Author:** ![brunoamaral](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/brunoamaral/32/21144_2.png) [@brunoamaral](https://discourse.gohugo.io/u/brunoamaral)\
**Post date:** [December 20, 2020, 2:22pm UTC](https://discourse.gohugo.io/t/shortcode-for-bootstrap-4-carousel-using-page-resources/15431/15 "2020-12-20T14:22:53Z")

</div>

take a look at [https://splidejs.com/](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.