Add automatic scrolling behavior to jam carousel

public/js/carousel.js

@@ -1,4 +1,7 @@
-function initCarousel(container, durationMS = 0) {
+function initCarousel(container, options = {}) {
+    const durationMS = options.durationMS ?? 0;
+    const onChange = options.onChange ?? (() => {});
+
     const numCarouselItems = container.querySelectorAll('.carousel-item').length;
     const buttonContainer = container.querySelector('.carousel-buttons');
 
@@ -25,6 +28,8 @@ function initCarousel(container, durationMS = 0) {
         buttons[i].classList.add('active');
 
         current = i;
+
+        onChange(current);
     }
 
     function activateNext() {

src/templates/src/project_index.html

@@ -71,6 +71,8 @@
 	</div>
 
 	<script>
-		initCarousel(document.querySelector('.project-carousel'), 10000);
+		initCarousel(document.querySelector('.project-carousel'), {
+			durationMS: 10000,
+		});
 	</script>
 {{ end }}

src/templates/src/wheeljam_2022_index.html

@@ -428,7 +428,15 @@
     </div>
 
     <script>
-        const { next, prev } = initCarousel(document.querySelector('.carousel-container'));
+        const carouselContainer = document.querySelector('.carousel-container');
+
+        const { next, prev } = initCarousel(carouselContainer, {
+            onChange() {
+                if (carouselContainer.getBoundingClientRect().top < 0) {
+                    carouselContainer.scrollIntoView({ behavior: 'smooth' });
+                }
+            },
+        });
 
         document.querySelector('.carousel-thinger.next')
             .addEventListener('click', () => {