Carousel working!

src/_data/portfolio.js

@@ -42,7 +42,7 @@ module.exports = [
   {
     img: 'results-summary-component.png',
     github: 'https://github.com/punkfairie/frontend-mentor/tree/main/results-summary-component',
-    title: 'Frontend Mentor: Results Summary Component',
+    title: 'Frontend Mentor: Results Summary',
     live: 'https://frontend-mentor-gold-five.vercel.app/',
     description: 'Exercise for Frontend Mentor.',
     tech: 'Made with Vite and PostCSS.',

src/index.liquid

@@ -29,12 +29,13 @@
   </header>
 
   <main class="Main">
-    <div class="Carousel">
+    <div class="Carousel" id="carousel">
+      {%- for project in portfolio -%}
         <div class="Carousel-item">
-          {% if project.img %}
+          {%- if project.img -%}
             <img src="/portfolio/{{ project.img }}"
               alt="Screenshot of punkfairie.net" class="Carousel-img">
-          {% endif %}
+          {%- endif -%}
 
 
           <div class="Carousel-title">
@@ -43,28 +44,28 @@
 
             {{ project.title }}
 
-            {% if project.live %}
+            {%- if project.live -%}
               / <a href="{{ project.live }}" target="_blank"><i
                 class="fa-solid fa-link" title="Visit project"></i></a>
-            {% endif %}
+            {%- endif -%}
           </div>
 
           <p class="Carousel-text">{{ project.description }}</p>
 
-          {% if project.tech %}
+          {%- if project.tech -%}
             <p class="Carousel-text">{{ project.tech }}</p>
-          {% endif %}
+          {%- endif -%}
         </div>
-      {% endfor %}
+      {%- endfor -%}
     </div>
 
     <button class="Carousel-controls Carousel-controls--left"
-      id="carousel-left">
+      id="carousel-prev">
       <i class="fa-solid fa-chevron-left" title="Previous item"></i>
     </button>
 
     <button class="Carousel-controls Carousel-controls--right"
-      id="carousel-right">
+      id="carousel-next">
       <i class="fa-solid fa-chevron-right" title="Next item"></i>
     </button>
   </main>

src/js/main.js

@@ -2,3 +2,20 @@ import CircleType from 'circletype'
 
 new CircleType(document.getElementById('footer')).radius(250).dir(-1)
 new CircleType(document.getElementById('headerTitle')).radius(450)
+
+const carousel = document.getElementById('carousel')
+const prevBtn = document.getElementById('carousel-prev')
+const nextBtn = document.getElementById('carousel-next')
+
+const scroll = function (event) {
+  const slideWidth = document.querySelector('.Carousel-item').clientWidth
+
+  if (event.target.id === 'carousel-next') {
+    carousel.scrollLeft += slideWidth
+  } else if (event.target.id === 'carousel-prev') {
+    carousel.scrollLeft -= slideWidth
+  }
+}
+
+nextBtn.addEventListener('click', scroll)
+prevBtn.addEventListener('click', scroll)

src/style/Carousel.css

@@ -23,7 +23,7 @@
     justify-content: center;
     margin: auto;
     text-align: center;
-    inline-size: 100%;
+    padding: 0 var(--space-s);
   }
 
   /* stylelint-disable-next-line a11y/media-prefers-reduced-motion */
@@ -73,18 +73,16 @@
 
   @media (prefers-reduced-motion: no-preference) {
     .Carousel-controls {
-      transition: translate 300ms, padding-inline-end 300ms;
+      transition: translate 300ms;
     }
 
     .Carousel-controls--left:hover, .Carousel-controls--left:focus {
-      padding-inline-end: 0.25rem;
+      transition: translate 300ms;
-      transition: translate 300ms, padding-inline-end 300ms;
       translate: -0.25rem var(--Carousel-controls-translateY);
     }
 
     .Carousel-controls--right:hover, .Carousel-controls--right:focus {
-      padding-inline-start: 0.25rem;
+      transition: translate 300ms;
-      transition: translate 300ms, padding-inline-end 300ms;
       translate: 0.25rem var(--Carousel-controls-translateY);
     }
   }