Added Slideshow Feature

lorenmt · Oct 28, 2024 · d625a44 · d625a44
1 parent facc515
commit d625a44
Show file tree

Hide file tree

Showing 10 changed files with 240 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -43,9 +43,18 @@ Clarity is an open-source, minimalist website template designed specifically for
 
 
 ## Update
+- **Oct. 8, 2024**: Feature update with `slideshow` design for automated slideshow display. Please checkout the `clarity.html` for detailed usage and instructions.
+
+<p align="center">
+  <img src="/assets/figures/slide_show.gif"/>
+</p>
+
 - **Oct. 24, 2024**: Feature update with `no-cover` design for title page design layout. For anyone prefer a title page design without a project cover, change `<div class="blog-title">` into `<div class="blog-title no-cover">`.
 - **Aug. 26, 2024**: Feature update with comparison display / [46ec3ee](https://github.com/lorenmt/clarity-template/commit/46ec3eee19ea86775982e3c93c5b35716bad2d09) suggested in  [Issue #1](https://github.com/lorenmt/clarity-template/issues/1#issue-2485070942).
 
+<p align="center">
+  <img src="/assets/figures/comparison.gif"/>
+</p>
 
 ## Usage
 Please follow the visual guidelines outlined in the [Clarity blog post](https://shikun.io/projects/clarity) or the `clarity.html` file to optimise visual layouts and design. Additionally, a minimalist example template, `minimal.html`, is provided to help you get started quickly.

diff --git a/assets/figures/comparison.gif b/assets/figures/comparison.gif
diff --git a/assets/figures/slide_show.gif b/assets/figures/slide_show.gif
diff --git a/assets/scripts/main.js b/assets/scripts/main.js
@@ -1,4 +1,4 @@
-// Slide Display
+//* ======================== Slide Control ===================== */
 var contents = document.getElementsByClassName("slide-content");
 
 document.getElementById("slide-menu").addEventListener("click", function(e) {
@@ -21,7 +21,7 @@ document.getElementById("slide-menu").addEventListener("click", function(e) {
   }
 });
 
-// Video controls
+//* ======================== Video Control ===================== */
 function ToggleVideo(x) {
   var videos = document.getElementsByClassName(x + '-video');
   for (var i = 0; i < videos.length; i++) {
@@ -83,3 +83,52 @@ function RestartVideo(x) {
   msg.offsetHeight; /* trigger reflow */
   msg.style.animation = null; 
 };
+
+//* ======================== Slide Show Control ===================== */
+const slider = document.querySelector('.container .slider');
+const [btnLeft, btnRight] = ['prev_btn', 'next_btn'].map(id => document.getElementById(id));
+let interval;
+
+// Set positions
+const setPositions = () => 
+    [...slider.children].forEach((item, i) => 
+        item.style.left = `${(i-1) * 440}px`);
+
+// Initial setup
+setPositions();
+
+// Set transition speed
+const setTransitionSpeed = (speed) => {
+    [...slider.children].forEach(item => 
+        item.style.transitionDuration = speed);
+};
+
+// Slide functions
+const next = (isAuto = false) => { 
+    setTransitionSpeed(isAuto ? '1.5s' : '0.2s');
+    slider.appendChild(slider.firstElementChild); 
+    setPositions(); 
+};
+
+const prev = () => { 
+    setTransitionSpeed('0.2s');
+    slider.prepend(slider.lastElementChild); 
+    setPositions(); 
+};
+
+// Auto slide
+const startAuto = () => interval = interval || setInterval(() => next(true), 2000);
+const stopAuto = () => { clearInterval(interval); interval = null; };
+
+// Event listeners
+btnRight.addEventListener('click', () => next(false));
+btnLeft.addEventListener('click', prev);
+
+// Mouse hover controls
+[slider, btnLeft, btnRight].forEach(el => {
+    el.addEventListener('mouseover', stopAuto);
+    el.addEventListener('mouseout', startAuto);
+});
+
+// Start auto slide
+startAuto();
diff --git a/assets/stylesheets/main.css b/assets/stylesheets/main.css
@@ -1229,4 +1229,36 @@ select:after {
   100% {
     opacity: 0;
   }
+}
+/* ======================== Slide Show Control ===================== */
+.slideshow .navigation {
+  display: flex;
+  justify-content: center;
+  padding: 20px 0;
+  gap: 10px;
+}
+
+.slideshow .slider {
+  position: relative;
+  width: 100%;
+  height: 440px;
+  padding-bottom: 20px;
+  overflow: hidden;
+}
+.slideshow .slider:hover {
+  cursor: pointer;
+}
+.slideshow .slider .slider-item {
+  width: 400px;
+  height: auto;
+  position: absolute;
+  top: 0;
+  left: 0;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  overflow: hidden;
+  padding-left: 40px;
+}
+.slideshow .slider .slider-item video {
+  display: block;
+  padding-bottom: 40px;
 }/*# sourceMappingURL=main.css.map */
diff --git a/assets/stylesheets/main.css.map b/assets/stylesheets/main.css.map
diff --git a/assets/stylesheets/main.scss b/assets/stylesheets/main.scss
@@ -1396,3 +1396,38 @@ select {
     50% { opacity:1; } 
     100% { opacity:0; } 
    }
+
+
+/* ======================== Slide Show Control ===================== */
+.slideshow .navigation{
+    display:flex;
+    justify-content: center;
+    padding: 20px 0;
+    gap: 10px;
+}
+
+.slideshow .slider{
+	position: relative;
+	width: 100%;
+	height: 440px;
+    padding-bottom: 20px;
+	overflow: hidden;
+    &:hover{
+        cursor: pointer;
+    }
+    & .slider-item{
+        width: 400px;
+        height: auto;
+        position: absolute;
+        top: 0;
+        left: 0;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        overflow: hidden;
+        padding-left: 40px;
+
+        & video {
+            display: block;
+            padding-bottom: 40px;
+        }
+    }
+}
diff --git a/assets/stylesheets/main_free.css b/assets/stylesheets/main_free.css
@@ -1230,6 +1230,39 @@ select:after {
     opacity: 0;
   }
 }
+/* ======================== Slide Show Control ===================== */
+.slideshow .navigation {
+  display: flex;
+  justify-content: center;
+  padding: 20px 0;
+  gap: 10px;
+}
+
+.slideshow .slider {
+  position: relative;
+  width: 100%;
+  height: 440px;
+  padding-bottom: 20px;
+  overflow: hidden;
+}
+.slideshow .slider:hover {
+  cursor: pointer;
+}
+.slideshow .slider .slider-item {
+  width: 400px;
+  height: auto;
+  position: absolute;
+  top: 0;
+  left: 0;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  overflow: hidden;
+  padding-left: 40px;
+}
+.slideshow .slider .slider-item video {
+  display: block;
+  padding-bottom: 40px;
+}
+
 h1, h2, h3, h4, h5, h6, p, a, code, pre, ol, ul, li {
   line-height: 1.5;
 }

diff --git a/assets/stylesheets/main_free.css.map b/assets/stylesheets/main_free.css.map
diff --git a/clarity.html b/clarity.html
@@ -365,6 +365,84 @@ <h2>
         </p>
     </div>
 
+    <div class="container blog main">
+        <h2>
+            Auto Slideshow Display
+        </h2>
+        <p class="text">
+            Alternatively, the Auto Slideshow Display feature enables readers to enjoy a large array of visual elements through an automated, slideshow-like presentation. Users can also navigate through the slideshow manually with "Left" and "Right" buttons. Below is an example using videos generated in <a href="https://mardini-vidgen.github.io/">MarDini</a>.
+        </p>
+        <!-- 
+        1. You may add another row of visual elements by simply adding a video element in each "slider-item" div. Correspondingly, you need to change the following in the scss file (under Slideshow Control): height: 440px into 440px * num_rows. 
+        2. You may also change the fixed image size by changing the following:
+            a. scss: .slider-item width: 400px -> changed width; 
+            b. scss: height: 440px -> changed width + padding_bottom;
+            c. javascript: item.style.left = `${(i-1) * 440}px`) -> changed width + padding_left
+        -->
+    </div>
+    <div class="container blog max gray">
+        <div class="slideshow">
+            <div class="navigation">
+                <!-- Using FontAwesome Pro -->
+                <!-- <a class="button icon" id="prev_btn"><i class="fa-solid fa-left" ></i></a>
+                <a class="button icon" id="next_btn"><i class="fa-solid fa-right"></i></a> -->
+                <!-- Using FontAwesome Free -->
+                <a class="button icon" id="prev_btn"><i class="fa-solid fa-arrow-left"></i></a>
+                <a class="button icon" id="next_btn"><i class="fa-solid fa-arrow-right"></i></a>
+            </div>
+            <div class="slider">
+                <div class="slider-item">
+                    <video loop playsinline muted autoplay src="https://mardini-vidgen.github.io/clarity/videos/1.mp4"></video>
+                </div>
+                <div class="slider-item">
+                    <video loop playsinline muted autoplay src="https://mardini-vidgen.github.io/clarity/videos/2.mp4"></video>
+                </div>
+                <div class="slider-item">
+                    <video loop playsinline muted autoplay src="https://mardini-vidgen.github.io/clarity/videos/3.mp4"></video>
+                </div>
+                <div class="slider-item">
+                    <video loop playsinline muted autoplay src="https://mardini-vidgen.github.io/clarity/videos/4.mp4"></video>
+                </div>
+                <div class="slider-item">
+                    <video loop playsinline muted autoplay src="https://mardini-vidgen.github.io/clarity/videos/5.mp4"></video>
+                </div>
+                <div class="slider-item">
+                    <video loop playsinline muted autoplay src="https://mardini-vidgen.github.io/clarity/videos/6.mp4"></video>
+                </div>
+                <div class="slider-item">
+                    <video loop playsinline muted autoplay src="https://mardini-vidgen.github.io/clarity/videos/7.mp4"></video>
+                </div>
+                <div class="slider-item">
+                    <video loop playsinline muted autoplay src="https://mardini-vidgen.github.io/clarity/videos/8.mp4"></video>
+                </div>
+                <div class="slider-item">
+                    <video loop playsinline muted autoplay src="https://mardini-vidgen.github.io/clarity/videos/9.mp4"></video>
+                </div>                   
+                <div class="slider-item">
+                    <video loop playsinline muted autoplay src="https://mardini-vidgen.github.io/clarity/videos/10.mp4"></video>
+                </div>
+                <div class="slider-item">
+                    <video loop playsinline muted autoplay src="https://mardini-vidgen.github.io/clarity/videos/11.mp4"></video>
+                </div>
+                <div class="slider-item">
+                    <video loop playsinline muted autoplay src="https://mardini-vidgen.github.io/clarity/videos/12.mp4"></video>
+                </div>
+                <div class="slider-item">
+                    <video loop playsinline muted autoplay src="https://mardini-vidgen.github.io/clarity/videos/13.mp4"></video>
+                </div>
+                <div class="slider-item">
+                    <video loop playsinline muted autoplay src="https://mardini-vidgen.github.io/clarity/videos/14.mp4"></video>
+                </div>
+                <div class="slider-item">
+                    <video loop playsinline muted autoplay src="https://mardini-vidgen.github.io/clarity/videos/15.mp4"></video>
+                </div>
+                <div class="slider-item">
+                    <video loop playsinline muted autoplay src="https://mardini-vidgen.github.io/clarity/videos/16.mp4"></video>
+                </div>
+            </div>
+        </div>
+    </div>
+
     <div class="container blog main">
         <h2>
             Selection Display