Test swiper integration

Signed-off-by: Bruno Rybársky <bruno@brn.systems>

assets/3rdparty/slick.css

@@ -1,109 +0,0 @@
-/* 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,14 +80,6 @@ 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");
@@ -305,7 +297,6 @@ async function onPageLoad() {
     if (currentSite === "memes" && currentPage === "index") {
         await getMemeImages();
     }
-    await doSlicks();
 }
 
 async function navigateTo(site, page) {
@@ -629,7 +620,7 @@ async function addMeme() {
     }, "Meme bol zmazaný", "Nastala chyba pri mazaní meme-u", false);
     memeTitleElement.value = "";
     memeTextElement.value = "";
-    memeImageElement.selectedIndex = 0
+    memeImageElement.selectedIndex = 0;
     await togglememecreate();
 }
 

pages/home/index.html

@@ -3,13 +3,11 @@
 <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>
+    <swiper-container>
+        <swiper-slide>Slide 1</swiper-slide>
+        <swiper-slide>Slide 2</swiper-slide>
+        <swiper-slide>Slide 3</swiper-slide>
+        <swiper-slide>Slide ...</swiper-slide>
+    </swiper-container>
 </header>
 <hr>

templates/skeleton.html

@@ -5,15 +5,13 @@
     <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>
+    <script async src="/assets/3rdparty/swiper.js"></script>
     <title>__TEMPLATE_PAGE_TITLE__</title>
     __TEMPLATE_SEO_STUFF__
 </head>