Carrousel for list of collection

[msm1227]

I am trying to accomplish something like this:

What would be the best way to do it? It will be a sidebar on the home page. I have collection for a list of articles and already have the layout for each done but am having trouble with wrapping my head out doing a carrousel type feature for something like that. I wasn't sure if pagination would be involved here or not.

Thanks!

[pdehaan]

It might all depend on your carousel code.
You could use pagination with a size:4, but then it'd create n static pages, which might not be what you want (if you were wanting to dynamically flip through the carousel without a page load). Here's a rough carousel idea using pagination which creates 5 static .html pages:

---
title: OK
pagination:
  data: users
  size: 4
---

<aside data-carousel>
  {% for item in pagination.items %}
    <article>
      <h1>{{ item.name }}</h1>
      <h2>{{ item.jobTitle }}</h2>
      <p>{{ item.bio }}</p>
    </article>
  {% endfor %}
  <nav>
    {% for nav in pagination.links %}
      <a href="{{ nav }}">&middot;</a>
    {% endfor %}
  </nav>
</aside>

… where my src/_data/users.js file populates the user data from faker-js and looks like this:

const { faker } = require('@faker-js/faker');

module.exports = Array.from({ length:17 }, () => ({
  name: faker.person.fullName(),
  jobTitle: faker.person.jobTitle(),
  bio: faker.person.bio(),
}));

[pdehaan]

I was also trying to do a "pretty" carousel like https://css-tricks.com/css-only-carousel/, but my CSS game is weak and the CSS ended up looking huge, but this might also get you semi-closer (or maybe makes everything worse). But here is an incomplete option for using the Nunjucks batch() filter to try and do a more dynamic carousel:

---
title: OK
batchSize: 4
---

<style>
 /* omitted */
</style>

<div class="slider">
  <div class="slides">
    {% for _users in users | batch(batchSize) %}
    <div id="slide-{{ loop.index }}">
      {% for user in _users %}
        <section>
          <p class="author-info">{{ user.name }}</p>
          <p>{{ user.jobTitle }}</p>
          <p>{{ user.bio | safe }}</p>
        </section>
      {% endfor %}
    </div>
    {% endfor %}
  </div>

  {% for _users in users | batch(batchSize) %}
  <a href="#slide-{{ loop.index }}">&middot;</a>
  {% endfor %}
</div>

[msm1227]

I just wanted to circle back and thank you for taking the time to look into this. I decided to just have it be a scrollbar for now (which is what the client initially had in mind anyway) so that I can move on to other parts of the project. If I come back around to this I'll be sure to post my final solution