# Best way of implementing an image slider / carousel - page resources?

**URL:** <https://discourse.gohugo.io/t/best-way-of-implementing-an-image-slider-carousel-page-resources/12202>\
**Category:** support\
**Created:** [May 31, 2018, 8:50am UTC](https://discourse.gohugo.io/t/best-way-of-implementing-an-image-slider-carousel-page-resources/12202 "2018-05-31T08:50:41Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![prembo](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/prembo/32/6065_2.png) [@prembo](https://discourse.gohugo.io/u/prembo)\
**Post date:** [May 31, 2018, 8:50am UTC](https://discourse.gohugo.io/t/best-way-of-implementing-an-image-slider-carousel-page-resources/12202/1 "2018-05-31T08:50:41Z")

</div>

Hi,  
I’m trying to implement an image slider / carousel. I’m wondering if the best approach is to use Page Resources or to use an approach like [this example](https://github.com/moodlebox/moodlebox.net/tree/master/data) whereby the slide data is listed as yaml files under a particular folder (eg `slides`) under the `data` folder.

I attempted unsuccessfully to follow the example here in this [Stackoverflow post](https://stackoverflow.com/questions/48213883/image-processing-outside-bundles).

This is how my content is set up

```
content 
     |--> index.md
     |--> images/
               |--> slide1.jpg
               |--> slide2.jpg
               |--> slide3.jpg

```

The front matter of my \_index.mg is:

```
resources:
  - name: "slide1"
    src: "images/slide1.jpg"
  - name: "slide2"
    src: "images/slide2.jpg"
  - name: "slide3"
    src: "images/slide3.jpg"

```

And my home page template code is:

```
    {{ with .Resources.ByType "image" }}
        <div class="slider">
            {{ range . }}
                <div class='slider-item'>
                    <img src="{{ .RelPermalink }}" />
                </div>
            {{ end }}
        </div>
    {{ end }}

```

I’ve also tried with no success:

```
    {{ with .Site.GetPage "section" "images" }}
        <h2>{{ .Title }}</h2>
        {{ $resources := .Resources.ByType "image"}}
        {{ range $resources }}
            {{ with . }}
            <div class='slider-item'>
                <img src="{{ .RelPermalink }}">
            </div>
            {{ end }}
        {{ end }}
    {{ end }}

```

I would like to understand why this approach isn’t working before abandoning to use the yaml file approach in the Moodle example above.

Any ideas and pointers would be greatly appreciated. Thank you.

---

<div class="post-metadata">

**Author:** ![RickCogley](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/rickcogley/32/10269_2.png) [@RickCogley](https://discourse.gohugo.io/u/RickCogley)\
**Post date:** [May 31, 2018, 8:55am UTC](https://discourse.gohugo.io/t/best-way-of-implementing-an-image-slider-carousel-page-resources/12202/2 "2018-05-31T08:55:59Z")

</div>

This partial shows how I’m doing it. I’m using bulma css here and a 3rd party extension for it called bulma-carousel. Conceptually it’s similar:

> <https://github.com/RickCogley/eSolia_2018/blob/master/layouts/partials/gallery.html#L9>

---

<div class="post-metadata">

**Author:** ![RickCogley](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/rickcogley/32/10269_2.png) [@RickCogley](https://discourse.gohugo.io/u/RickCogley)\
**Post date:** [May 31, 2018, 9:00am UTC](https://discourse.gohugo.io/t/best-way-of-implementing-an-image-slider-carousel-page-resources/12202/3 "2018-05-31T09:00:07Z")

</div>

The image files are just in the same folder as the markdown files, in my case, and this code assumes their name is “eSolia-Post-Slider…”.

End result looks like the gallery at the bottom:

[https://esolia.com/office-moves/](https://esolia.com/office-moves/)

---

<div class="post-metadata">

**Author:** ![prembo](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/prembo/32/6065_2.png) [@prembo](https://discourse.gohugo.io/u/prembo)\
**Post date:** [June 9, 2018, 6:25am UTC](https://discourse.gohugo.io/t/best-way-of-implementing-an-image-slider-carousel-page-resources/12202/4 "2018-06-09T06:25:10Z")

</div>

Hi Rick,

Thanks very much for those suggestions. I’ve learned a lot from looking at the eSolia website Hugo code.

In the end, my issue was that the images were located in the folder `images/` rather than alongside `_index.md`.

Thanks for taking the time to offer some some help.

---

<div class="post-metadata">

**Author:** ![le-dawg](https://avatars.discourse-cdn.com/v4/letter/l/71e660/32.png) [@le-dawg](https://discourse.gohugo.io/u/le-dawg)\
**Post date:** [December 4, 2018, 10:50am UTC](https://discourse.gohugo.io/t/best-way-of-implementing-an-image-slider-carousel-page-resources/12202/5 "2018-12-04T10:50:27Z")

</div>

Hi,

is this approach universally applicable with any theme ? Hugo newbie here.