slider

assets/css/style.css

@@ -128,6 +128,20 @@ position: sticky;
 top: 0;
 position: -webkit-sticky; /* for Safari */
 align-self: flex-start;
+overflow-wrap: break-word;
+  word-wrap: break-word;
+
+  -ms-word-break: break-all;
+  /* This is the dangerous one in WebKit, as it breaks things wherever */
+  word-break: break-all;
+  /* Instead use this non-standard one: */
+  word-break: break-word;
+
+  /* Adds a hyphen where the word breaks, if supported (No Blink) */
+  -ms-hyphens: auto;
+  -moz-hyphens: auto;
+  -webkit-hyphens: auto;
+  hyphens: auto;
 }
 
 h2{
@@ -329,6 +343,20 @@ section.text{
 
 section.footnote{
   width:50%;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+
+  -ms-word-break: break-all;
+  /* This is the dangerous one in WebKit, as it breaks things wherever */
+  word-break: break-all;
+  /* Instead use this non-standard one: */
+  word-break: break-word;
+
+  /* Adds a hyphen where the word breaks, if supported (No Blink) */
+  -ms-hyphens: auto;
+  -moz-hyphens: auto;
+  -webkit-hyphens: auto;
+  hyphens: auto;
 }
 
 .text{
@@ -405,6 +433,20 @@ section.text{
   width:90%;
   padding-bottom: 100px;
   font-size: 10pt;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+
+  -ms-word-break: break-all;
+  /* This is the dangerous one in WebKit, as it breaks things wherever */
+  word-break: break-all;
+  /* Instead use this non-standard one: */
+  word-break: break-word;
+
+  /* Adds a hyphen where the word breaks, if supported (No Blink) */
+  -ms-hyphens: auto;
+  -moz-hyphens: auto;
+  -webkit-hyphens: auto;
+  hyphens: auto;
   }
 
   .text-body {

assets/js/slider.js

@@ -187,6 +187,7 @@ const images = [
 ];
 
 document.addEventListener("DOMContentLoaded", () => {
+
   const slider = document.getElementById("slider");
   const sliderContainer = document.getElementById("slider-container");
   const captionsBlock = document.getElementsByClassName('captions')[0];
@@ -200,7 +201,30 @@ document.addEventListener("DOMContentLoaded", () => {
       slider.appendChild(img);
       img.style.height = image.size * 100 + "%";
     });
+
+    const intervalDuration = 2500; // Set the interval duration in milliseconds (e.g., 5000ms = 5 seconds)
+    let autoplayInterval;
+
+    const startAutoplay = () => {
+     autoplayInterval = setInterval(() => {
+        nextSlide();
+     }, intervalDuration);
+  };
+
+    const stopAutoplay = () => {
+      clearInterval(autoplayInterval);
+    };
+
+    // Start autoplay when the document is ready
+    startAutoplay();
+
+  // Stop autoplay on mouseover and resume on mouseleave
+    sliderContainer.addEventListener("mouseover", stopAutoplay);
+    sliderContainer.addEventListener("mouseleave", startAutoplay);
+
   };
+
+
 
   const updateSlider = () => {
     const caption = images[currentIndex % images.length].caption;
@@ -264,4 +288,29 @@ document.addEventListener("DOMContentLoaded", () => {
   sliderContainer.addEventListener('mouseleave', () => {
     document.body.style.cursor = 'auto';
   })
+
+  // Touch event listeners for horizontal scrolling on mobile
+  let touchStartX = 0;
+  let touchEndX = 0;
+
+  sliderContainer.addEventListener("touchstart", (e) => {
+    touchStartX = e.touches[0].clientX;
+  });
+
+  sliderContainer.addEventListener("touchmove", (e) => {
+    touchEndX = e.touches[0].clientX;
+  });
+
+  sliderContainer.addEventListener("touchend", () => {
+    const swipeThreshold = 50; // Adjust the threshold as needed
+    const swipeDistance = touchEndX - touchStartX;
+
+    if (swipeDistance > swipeThreshold) {
+      prevSlide();
+    } else if (swipeDistance < -swipeThreshold) {
+      nextSlide();
+    }
+  });
+
+
 });

index.html

@@ -141,7 +141,7 @@ <h2 class="title" id="introduction">Introduction</h2>
 											is matter in movement, in flux, in
 											variation’, with the consequence that ‘this matter-flow can only be
 											followed’.
-											<sup class="footnote-ref"><a href="#fn2" id="fnref1">[2]</a></sup>
+											<sup class="footnote-ref"><a href="#fn2" id="fnref2">[2]</a></sup>
 										<p class="p2">Some non-human dimensions are not accessible to the human eye
 											without
 											machine vision.
@@ -1061,7 +1061,7 @@ <h2 class="title" id="neon-future-text"> </h2>
 											<p>Bloomberg–US Pressured Netherlands to block China -bound Chip
 												Machinery,</i> 1 Jan. 2024, 
 												<a
-													href="www.bloomberg.com/news/articles/2024-01-01/us-pushed-asml-to-block-chinese-sales-before-january-deadline">link.</a>
+													href="https://www.bloomberg.com/news/articles/2024-01-01/us-pushed-asml-to-block-chinese-sales-before-january-deadline">www.bloomberg.com/news/articles/2024-01-01/us-pushed-asml-to-block-chinese-sales-before-january-deadline</a>.
 
 												<a href="#fnref6-3" class="footnote-backref">↩︎</a>
 											</p>
@@ -1075,7 +1075,7 @@ <h2 class="title" id="neon-future-text"> </h2>
 										<li id="fn8-3" class="footnote-item">
 											<p>Bogna Konior, Tick Tack. “Entropy Moves.” <i>Exhibition Text</i>, 2023,
 												<a
-													href="ticktack.be/storage/files/src/aVVPKBF8x1oANyWDss3obpVjKVtSmnO135xDg3rk.pdf">link.</a>
+													href="https://ticktack.be/storage/files/src/aVVPKBF8x1oANyWDss3obpVjKVtSmnO135xDg3rk.pdf">ticktack.be/storage/files/src/aVVPKBF8x1oANyWDss3obpVjKVtSmnO135xDg3rk.pdf</a>.
 
 												<a href="#fnref8-3" class="footnote-backref">↩︎</a>
 											</p>