Basic Slider/Carousel Implementation

Help
1

I am very novis. I have a site I am building. I would like to implement a slider/carousel. I have referred to the instructions on the Jekyll website, and am coming up short. There seem to be a few other posts on here about carousels, but none of them really address my basic questions:

Background:
I am trying to use carousels on a github pages site using the minima theme. https://github.com/steenblikrs/padri

The instructions on the Jekyll site are very basic. https://jekyllcodex.org/without-plugin/slider/#help
I have been able to get the carousel to populate on my page, but I am not sure how to implement multiple carousels showing different image on my site?

Also, some of the examples referred to on the Jekyll site show how to change it from a sliding action to fade action. Unfortunately those examples use css. I am trying to implement the simplest slide I can. Is it possible to do the fade with this simple html only implementation? I cannot seem to find the place where that is implemented in carousel.html (which is found in the _includes folder)

Any help would be useful. Thank you!

1 Like
2

When you replace ‘site.data.carousel’ with ‘page’ you can put the images array in your pages front matter. That is a way to make the carousel reusable. For the fade you need a few CSS tweaks. There is not HTML only way.

Your front matter will then look like this:

---
title: pagetitle
images: 
  - image: /uploads/slider/image1.jpg
  - image: /uploads/slider/image2.jpg
  - image: /uploads/slider/image3.jpg
  - image: /uploads/slider/image4.jpg
---

However, this still expects you to call the carousel code in the layout file. If you want to use the carousel in the content, you need to write the include in the .md file (which is not very elegant).

2 Likes
3

Thank you! I will try this and post any follow-up once I’ve had the chance to test it out.

1 Like
4

Ok I have had a chance to try a few things based on what you have said… There are a few question based on your described solution.

  1. What do I do with _data/carousel.yml?

  2. I couldn’t seem to get either approach to work. I tried putting the carousel html script in a bunch of places, but it doesn’t seem to work… :frowning: I have sat on this for a week or so now, just feeling overwhelmed by the debugging. Maybe I should revert back to the single carousel I had previously… Any help would be appreciated.

5

Can you explain what is broken? The way you store and retrieve data independent of the CSS?

Or that part works but your css is broken? Do you get errors on the page JS console?

I see you store and iterate over the carousel data fine.

Since you run it as an includes file and just need it to work, it makes sense to keep your data centralized in _data and not move it to frontmatter. You can always add multiple galleries in the data file or frontmatter later.

Also using raw.githubusercontent.com is not going to give as good performance for image loading as

url("/assets/foo.png")

Or add relative_url to get it on /my-repo/assets/foo.png

1 Like