# Slider/Carousel in Minimal Theme

**URL:** <https://talk.jekyllrb.com/t/slider-carousel-in-minimal-theme/6782>\
**Category:** Uncategorized\
**Created:** [December 5, 2021, 3:45pm UTC](https://talk.jekyllrb.com/t/slider-carousel-in-minimal-theme/6782 "2021-12-05T15:45:18Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![stosto2](https://avatars.discourse-cdn.com/v4/letter/s/838e76/32.png) [@stosto2](https://talk.jekyllrb.com/u/stosto2)\
**Post date:** [December 5, 2021, 3:45pm UTC](https://talk.jekyllrb.com/t/slider-carousel-in-minimal-theme/6782/1 "2021-12-05T15:45:18Z")

</div>

Hello,  
I’m very new (like a couple of hours new) at Jekyll and github. I’m trying to add a carousel to a portfolio based on [this one.](https://github.com/evanca/quick-portfolio) I followed the steps from the [jekylcodex tutorial](https://jekyllcodex.org/without-plugin/slider/#help) and now I have **one** carousel. How can I make it reusable so that I can have a few different carousels on the same page?  
Thanks!

---

<div class="post-metadata">

**Author:** ![MichaelCurrin](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/michaelcurrin/32/2340_2.png) [@MichaelCurrin](https://talk.jekyllrb.com/u/MichaelCurrin)\
**Post date:** [December 5, 2021, 8:20pm UTC](https://talk.jekyllrb.com/t/slider-carousel-in-minimal-theme/6782/2 "2021-12-05T20:20:51Z")

</div>

Hi. Welcome to Jekyll.

Jekyll has a templating approach. So one way to repeat content is to have a layout. e.g. to have a menu on every page, you could add one in the default.html layout

And if you have a snippet of code which you want to add on or more times on any given page, whether a layout file or a page, then you need `includes`.

The Jekyll docs will help you.

> **[Includes](https://jekyllrb.com/docs/includes/)**
>
> The include tag allows you to include the content from another file stored in the \_includes folder:

If you make a file like this

```auto
_includes/carousel.html

```

Then anywhere you can put it on the page like this:

```auto
---
title: Home
---

## Gallery A

{% include carousel.html dir="assets/abc" %}

## Gallery B

{% include carousel.html dir="assets/def" %}

```

Sometimes you just need a dumb includes file that adds the same code each time.

Sometimes you want it to reference a value on the page as `page.my_variable`.

Sometimes you want it to reference a value you pass to it like in the snippet above.

The contents of the includes file then might then use say `include.dir` or whatever name you want and to pass in, the do something with it.

In your case maybe you pass in a directory name, or the names of the images.

```auto
---
gallery_a:
  - abc.png
  - def.png
---

{% include carousel.html my_images=gallery_a %}

```

---

<div class="post-metadata">

**Author:** ![MichaelCurrin](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/michaelcurrin/32/2340_2.png) [@MichaelCurrin](https://talk.jekyllrb.com/u/MichaelCurrin)\
**Post date:** [December 5, 2021, 8:25pm UTC](https://talk.jekyllrb.com/t/slider-carousel-in-minimal-theme/6782/3 "2021-12-05T20:25:16Z")

</div>

The resource you linked already uses includes.

But the tutorial depends on a global value of configured images.

So instead of setting the images site wide, you will want to set them per page or multiple image lists on a page.

```auto
---
gallery_a: [abc.png, def.png, xyz.png]

---
{% include carousel.html height="50"
   unit="%" duration="7" images=gallery_a %}

```

---

<div class="post-metadata">

**Author:** ![jhvanderschee](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/jhvanderschee/32/583_2.png) [@jhvanderschee](https://talk.jekyllrb.com/u/jhvanderschee)\
**Post date:** [December 5, 2021, 10:57pm UTC](https://talk.jekyllrb.com/t/slider-carousel-in-minimal-theme/6782/4 "2021-12-05T22:57:10Z")

</div>

I have updated the code. Now it supports multiple includes. You can find it here:

> **[Slider/Carousel](https://jekyllcodex.org/without-plugin/slider/#)**
>
> Introduction: A lot of websites have a slider (or carousel). Most of them in the header. The big question is: Should I use a carousel? If you decide you shou...

---

<div class="post-metadata">

**Author:** ![pippim](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/pippim/32/4089_2.png) [@pippim](https://talk.jekyllrb.com/u/pippim)\
**Post date:** [December 6, 2021, 4:53am UTC](https://talk.jekyllrb.com/t/slider-carousel-in-minimal-theme/6782/5 "2021-12-06T04:53:25Z")

</div>

@jvtrigueros WOW that was quick! Good work.

---

<div class="post-metadata">

**Author:** ![stosto2](https://avatars.discourse-cdn.com/v4/letter/s/838e76/32.png) [@stosto2](https://talk.jekyllrb.com/u/stosto2)\
**Post date:** [December 6, 2021, 8:08am UTC](https://talk.jekyllrb.com/t/slider-carousel-in-minimal-theme/6782/6 "2021-12-06T08:08:13Z")

</div>

Wow that’s great! Thanks!

---

<div class="post-metadata">

**Author:** ![stosto2](https://avatars.discourse-cdn.com/v4/letter/s/838e76/32.png) [@stosto2](https://talk.jekyllrb.com/u/stosto2)\
**Post date:** [December 6, 2021, 8:10am UTC](https://talk.jekyllrb.com/t/slider-carousel-in-minimal-theme/6782/7 "2021-12-06T08:10:24Z")

</div>

Thanks for this! Obviously I don’t need it anymore as the original code was changed, but “Passing parameter variables to includes” seems like something I should know about.

---

<div class="post-metadata">

**Author:** ![MichaelCurrin](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/michaelcurrin/32/2340_2.png) [@MichaelCurrin](https://talk.jekyllrb.com/u/MichaelCurrin)\
**Post date:** [December 6, 2021, 8:41am UTC](https://talk.jekyllrb.com/t/slider-carousel-in-minimal-theme/6782/8 "2021-12-06T08:41:07Z")

</div>

I’m glad that helps.