Het maken van een carrousel

[SamaraFellaDina]

Wij zitten nog te kijken waar we deze carrousel willen hebben

• Idee 1: Wij willen een carrousel maken voor elke catergorie op de homepagina. Dit was @zainablfz haar idee.
• Idee 2: Een uitlichting maken onder welk artikel. Voor als je een artikel hebt afgelezen, dat dit onder het artikel komt te staan om de kijker te motiveren. Dit was @SamaraFellaDina haar idee.

Het enige is nog, zouden we hiervoor een partial kunnen maken?

[SamaraFellaDina]

[zainablfz]

Hee! Ik ben vandaag bezig geweest met het maken van de carrousel op de homepagina. Ik heb het helaas nog niet af, maar de basis staat er wel. Er moeten nog dingen aangepast worden en toegevoegd, dus ik maak even een to-do lijst hieronder zodat wij beide er een overzicht van hebben 🙃 . Ook belangrijk om te weten is dat het op mobile versie niet goed is gelukt, dus hier moet ik nog even naar kijken en hier vraag ik morgen ook hulp. Op desktop versie ziet het er wat beter uit:

To-do lijst carrousel

• [ ] Mobiele versie werkend maken
• [ ] De artikelen/ carrousel een betere styling geven
• [ ] Buttons maken voor de carrousel

[SamaraFellaDina]

heee! @zainablfz ik ga er ook even naar kijken!

[SamaraFellaDina]

Hee! Dit heb ik tot nu toe gedaan, ik wil nog het volgende doen

• Die puntjes onderaan maken
• Een blur aan de zijkanten maken
• goed maken voor mobiel
• Automatische scroll?
• Dat het artikel waarnaar je kijkt in het midden staat
• Dat wanneer je bij het laatste artikel bent, hij de eerste weer ernaast laat zien

[SamaraFellaDina]

Ik wou graag de interactie erin doen waarbij hij automatisch scrollt, dit lukt op enige weg wel, alleen zitten er nog een aantal bugs in. Dit is tot nu toe mijn code

html

  <div class="carousel">
  <ol class="featured-carousel">
        <% articles.forEach(article => { %>
          <li>
            <a href="/artikel/<%= article.slug %>">
              <picture>
                <img src="<%= article.jetpack_featured_media_url %>"
                    alt="artikel afbeelding"
                    width="<%= article.yoast_head_json.og_image[0].width %>" 
                    height="<%= article.yoast_head_json.og_image[0].height %>"
                    loading="lazy">
              </picture>
              <div>
                <time>
                  <%= String(new Date(article.date).getDate()).padStart(2, '0') %>/<%= String(new Date(article.date).getMonth() + 1).padStart(2, '0') %>/<%= new Date(article.date).getFullYear() %>
                </time>
                <h1><%- article.title.rendered %></h1>
                <p><%- article.yoast_head_json.author %></p>
              </div>
            </a>
          </li> 
        <% }) %>
    </ol>

• Ik weet niet zeker of die div erin moet, dus die haal ik hoogswaarschijnlijk weg

js

document.addEventListener('DOMContentLoaded', () => {
  const carousels = document.querySelectorAll('.featured-carousel');

  carousels.forEach(carousel => {
    const carouselContainer = carousel.querySelector('li');
    const carouselItems = carouselContainer.querySelectorAll('li');

    // Clone each item and append to the carousel container
    carouselItems.forEach(item => {
      const duplicatedItem = item.cloneNode(true);
      carouselContainer.appendChild(duplicatedItem);
    });

    // Apply the animation to the carousel container
    carouselContainer.style.display = 'flex';
    carouselContainer.style.animation = 'move 12s linear infinite';
  });
});