finished screenshot slider

assets/js/script.js

@@ -0,0 +1,125 @@
+$(document).ready(function () {
+  "use strict";
+
+  //  Headroom Initialize
+  $(".main-nav").headroom();
+
+  // Scroll to top
+  $("a[href='#top']").click(function () {
+    $("html, body").animate(
+      {
+        scrollTop: 0,
+      },
+      "slow"
+    );
+    return false;
+  });
+
+  // Magnific Popup
+  $(".popup-youtube, .popup-vimeo, .popup-gmaps").magnificPopup({
+    disableOn: 700,
+    type: "iframe",
+    mainClass: "mfp-fade",
+    removalDelay: 160,
+    preloader: false,
+    fixedContentPos: false,
+  });
+
+  // Smooth scroll
+  $("a.scroll-to").on("click", function (event) {
+    var $anchor = $(this);
+    $("html, body")
+      .stop()
+      .animate(
+        {
+          scrollTop: $($anchor.attr("href")).offset().top - 50,
+        },
+        1000
+      );
+    event.preventDefault();
+  });
+
+  if (window.innerWidth > 767) {
+    $(".service-item").matchHeight({
+      byRow: 0,
+    });
+
+    $(".blog-post-item").matchHeight({
+      byRow: 0,
+    });
+  }
+
+  $(".testimonial-slider-item").matchHeight({
+    byRow: 0,
+  });
+
+  // Screenshot Slider
+  $(".screenshots-slider").slick({
+    infinite: true,
+    slidesToShow: 5,
+    slidesToScroll: 1,
+    dots: true,
+    arrows: false,
+    centerMode: true,
+    centerPadding: "0px",
+    autoplay: true,
+    speed: 300,
+
+    responsive: [
+      {
+        breakpoint: 992,
+        settings: {
+          slidesToShow: 3,
+          slidesToScroll: 1,
+        },
+      },
+      {
+        breakpoint: 576,
+        settings: {
+          slidesToShow: 1,
+          slidesToScroll: 1,
+        },
+      },
+    ],
+  });
+
+  // Testimonial slider
+  $(".testimonial-slider").slick({
+    infinite: true,
+    slidesToShow: 3,
+    slidesToScroll: 1,
+    dots: false,
+    arrows: false,
+    centerMode: true,
+    centerPadding: "-100px",
+    autoplay: true,
+    speed: 500,
+    vertical: true,
+    verticalSwiping: true,
+  });
+
+  $(".slick-slider").on("click", ".slick-slide", function (e) {
+    e.stopPropagation();
+    var index = $(this).data("slick-index");
+    if ($(".testimonial-slider").slick("slickCurrentSlide") !== index) {
+      $(".testimonial-slider").slick("slickGoTo", index);
+    }
+  });
+
+  // AOS initialize
+  AOS.init({
+    disable: "mobile",
+  });
+
+  // Tooltip
+  $(".footer-tooltip").tooltip();
+});
+
+// sticky nav
+$(window).on("scroll", function () {
+  if ($(window).scrollTop()) {
+    $("nav").addClass("nav-bg");
+  } else {
+    $("nav").removeClass("nav-bg");
+  }
+});

data/screenshots.yml

@@ -4,10 +4,24 @@ title: An ever expanding App Store
 description: Home Cloud runs a wide-array of free and open-source apps that is always growing. From photos, to music, to ad-blockers almost anything will run on Home Cloud!
 
 images:
-  - url: images/screenshots/slider1.png
-  - url: images/screenshots/slider2.png
-  - url: images/screenshots/slider3.png
-  - url: images/screenshots/slider4.png
-  - url: images/screenshots/slider5.png
-  - url: images/screenshots/slider3.png
-  - url: images/screenshots/immich-rounded.png
+  - url: images/screenshots/immich.png
+    text: >
+      Immich is a photo and video storage app that fully replaces services like iCloud and Google Photos.
+  - url: images/screenshots/home-assistant.png
+    text: >
+      Home Assistant puts local control and privacy first by powering your smart home instead of Google or Alexa.
+  - url: images/screenshots/tempo.png
+    text: >
+      Navidrome allows you to enjoy your music collection from anywhere all while storing your favorite tunes at home.
+  - url: images/screenshots/mealie.png
+    text: >
+      Mealie is a recipe manager and planner that helps you keep your family healthy and happy.
+  - url: images/screenshots/jellyfin.png
+    text: >
+      Jellyfin is the volunteer-built media solution that puts you in control of your media. Stream to any device from your own server, with no strings attached.
+  - url: images/screenshots/antenna-pod.png
+    text: >
+      PodFetch enables you to sync your podcast lists and status across all your devices.
+  - url: images/screenshots/memos.png
+    text: >
+      Memos is a privacy first note taking app that makes it easy to capture and share your greatest thoughts.

layouts/partials/screenshots.html

@@ -0,0 +1,36 @@
+{{ with .Site.Data.screenshots }}
+  {{ if .enable }}
+    <section class="screenshots">
+      <div class="container">
+        <div class="row">
+          <div class="col-lg-8 mx-auto">
+            <div class="screenshots-title">
+              <h2>
+                {{ .title }}
+              </h2>
+              <p>
+                {{ .description }}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="screenshots-wrapper">
+        <div class="screenshots-slider">
+          {{ $Section := .images }}
+          {{ range $Section }}
+            <div class="screenshots-slider-item">
+              <div class="parent" style="position: relative;">
+                <img src={{ .url }} alt="" style="position: absolute; top: 0; left: 0; padding:0 9px;" />
+                <img src="images/screenshots/slider-frame.svg" alt="slider-frame" style="position: relative;" />
+              </div>
+              <div class="screenshots-title">
+                <p>{{ .text }}</p>
+              </div>
+            </div>
+          {{ end }}
+        </div>
+      </div>
+    </section>
+  {{ end }}
+{{ end }}