Slider/Carousel in Minimal Theme

1

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. I followed the steps from the jekylcodex tutorial 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!

1 Like
2

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.

If you make a file like this

_includes/carousel.html

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

---
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.

---
gallery_a:
  - abc.png
  - def.png
---

{% include carousel.html my_images=gallery_a %}
1 Like
3

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.

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

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

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

1 Like
5

@jvtrigueros WOW that was quick! Good work.

6

Wow that’s great! Thanks!

7

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.

1 Like
8

I’m glad that helps.