Test slick integration

assets/3rdparty/slick.css

@@ -0,0 +1,109 @@
+/* Slider */
+.slick-slider {
+    position: relative;
+
+    display: block;
+    box-sizing: border-box;
+
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+
+    -webkit-touch-callout: none;
+    -ms-touch-action: pan-y;
+    touch-action: pan-y;
+    -webkit-tap-highlight-color: transparent;
+}
+
+.slick-list {
+    position: relative;
+
+    display: block;
+    overflow: hidden;
+
+    margin: 0;
+    padding: 0;
+}
+
+.slick-list:focus {
+    outline: none;
+}
+
+.slick-list.dragging {
+    cursor: hand;
+}
+
+.slick-slider .slick-track,
+.slick-slider .slick-list {
+    transform: translate3d(0, 0, 0);
+}
+
+.slick-track {
+    position: relative;
+    top: 0;
+    left: 0;
+
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.slick-track:before,
+.slick-track:after {
+    display: table;
+
+    content: '';
+}
+
+.slick-track:after {
+    clear: both;
+}
+
+.slick-loading .slick-track {
+    visibility: hidden;
+}
+
+.slick-slide {
+    display: none;
+    float: left;
+
+    height: 100%;
+    min-height: 1px;
+}
+
+[dir='rtl'] .slick-slide {
+    float: right;
+}
+
+.slick-slide img {
+    display: block;
+}
+
+.slick-slide.slick-loading img {
+    display: none;
+}
+
+.slick-slide.dragging img {
+    pointer-events: none;
+}
+
+.slick-initialized .slick-slide {
+    display: block;
+}
+
+.slick-loading .slick-slide {
+    visibility: hidden;
+}
+
+.slick-vertical .slick-slide {
+    display: block;
+
+    height: auto;
+
+    border: 1px solid transparent;
+}
+
+.slick-arrow.slick-hidden {
+    display: none;
+}

assets/script.js

@@ -80,6 +80,14 @@ async function doAction(url, requestData, successMessage, failureMessage, silent
     return data;
 }
 
+async function doSlicks() {
+    const elements = document.querySelectorAll('[data-slick]');
+    elements.forEach(function(element) {
+        // Initialize the Slick carousel on each element
+        element.slick();
+    });
+}
+
 async function handlePageResponse(data) {
     "use strict";
     const navbar = document.getElementById("navbar_container");
@@ -91,7 +99,6 @@ async function handlePageResponse(data) {
     if (data.PageTitle) {
         document.title = data.PageTitle;
     }
-
     if (data.Page) {
         pageArea.innerHTML = data.Page;
         if (data.PageLocation) {
@@ -298,6 +305,7 @@ async function onPageLoad() {
     if (currentSite === "memes" && currentPage === "index") {
         await getMemeImages();
     }
+    await doSlicks();
 }
 
 async function navigateTo(site, page) {

pages/home/index.html

@@ -3,5 +3,13 @@
 <header>
     <h1 class="title">Vitaj, na tejto úžasnej stránke</h1>
     <p>Neoficiálna študentská stránka pre Adlerku</p>
+    <div data-slick='{"slidesToShow": 4, "slidesToScroll": 4}'>
+        <div><h3>1</h3></div>
+        <div><h3>2</h3></div>
+        <div><h3>3</h3></div>
+        <div><h3>4</h3></div>
+        <div><h3>5</h3></div>
+        <div><h3>6</h3></div>
+    </div>
 </header>
 <hr>

templates/skeleton.html

@@ -5,12 +5,15 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="/assets/3rdparty/fonts/remixicon/remixicon.css">
     <link rel="stylesheet" href="/assets/3rdparty/pico.min.css">
+    <link rel="stylesheet" href="/assets/3rdparty/slick.css">
+    <link rel="stylesheet" href="/assets/3rdparty/slick-theme.css">
     <link rel="stylesheet" href="/assets/style.css">
     <link rel="icon" href="/assets/images/favicon.png" type="image/png">
     __TEMPLATE__DYNAMIC__SCRIPT__
     __TEMPLATE__DYNAMIC__STYLE__
     <script async src="https://umami.brn.systems/script.js" data-website-id="95e93885-5c19-4cab-ba9b-2f746a316a2a"></script>
     <script async src="/assets/script.js"></script>
+    <script async src="/assets/3rdparty/slick.min.js"></script>
     <title>__TEMPLATE_PAGE_TITLE__</title>
     __TEMPLATE_SEO_STUFF__
 </head>