pictures using carousel

README.md

@@ -40,7 +40,8 @@ Apply to: Main window (address bar)
 * Add custom amount of videos per page
 
 ## Credits
-[TheFrenchGhosty](https://thefrenchghosty.me) ([Github](https://github.com/TheFrenchGhosty)): Initial Dockerfile and fixes to a usable state.
+* [TheFrenchGhosty](https://thefrenchghosty.me) ([Github](https://github.com/TheFrenchGhosty)): Initial Dockerfile and fixes to a usable state.
+* [Jennifer Wjertzoch](https://wjertzochjennifer.medium.com): Carousel CSS Implementation
 
 ### External libraries
 * [TikScraperPHP](https://github.com/pablouser1/TikScraperPHP)

composer.json

@@ -1,7 +1,7 @@
 {
     "name": "pablouser1/proxitok",
     "description": "An alternative frontend for TikTok",
-    "version": "2.4.8.0",
+    "version": "2.4.8.1",
     "license": "AGPL-3.0-or-later",
     "type": "project",
     "authors": [

composer.lock

@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "edc1f7ddb80ad13369e0536c32518ece",
+    "content-hash": "15a71acabddd2588be9800ae1bb37c92",
     "packages": [
         {
             "name": "bramus/router",

styles/carousel.css

@@ -0,0 +1,68 @@
+/*
+CREDITS:
+	CSS Taken from: https://levelup.gitconnected.com/how-to-make-a-fully-accessible-css-only-carousel-40e8bd62032b
+	Author: Jennifer Wjertzoch (https://wjertzochjennifer.medium.com)
+	CodePen: https://codepen.io/jwjertzoch/pen/JjyGeRy
+*/
+
+.carousel {
+  margin: 0 auto;
+  overflow: hidden;
+  text-align: center;
+}
+
+.slides {
+  width: 100%;
+  display: flex;
+  overflow-x: scroll;
+  scrollbar-width: none;
+  scroll-snap-type: x mandatory;
+  scroll-behavior: smooth;
+}
+
+.slides::-webkit-scrollbar {
+  display: none;
+}
+
+.slides-item {
+	max-height: 75vh;
+  align-items: center;
+  display: flex;
+  flex-shrink: 0;
+  justify-content: center;
+  margin: 0 1rem;
+  position: relative;
+  scroll-snap-align: start;
+  transform: scale(1);
+  transform-origin: center center;
+  transition: transform .5s;
+  width: 100%;
+}
+
+.slides-item img {
+	max-height: 75vh;
+}
+
+.carousel__nav {
+  padding: 1.25rem .5rem;
+}
+
+.slider-nav {
+  align-items: center;
+  background-color: #ddd;
+  border-radius: 50%;
+  color: #000;
+  display: inline-flex;
+  height: 1.5rem;
+  justify-content: center;
+  padding: .5rem;
+  position: relative;
+  text-decoration: none;
+  width: 1.5rem;
+}
+
+.slider-nav:hover,
+.slider-nav:active {
+  background-color: #000;
+  color: #fff;
+}

templates/components/head.latte

@@ -31,5 +31,6 @@
 	{/if}
 	<link rel="stylesheet" href="{static('css', 'cssgg.min.css', true)}">
 	<link rel="stylesheet" href="{static('css', 'bulma.min.css', true)}">
+	<link rel="stylesheet" href="{static('css', 'carousel.css')}">
 	<title>{$title} - ProxiTok</title>
 </head>

templates/components/themes/common/content.latte

@@ -3,17 +3,19 @@
 	<source src="{url_stream($item->video->playAddr)}" type="video/mp4" />
 </video>
 {else}
-<div n:class="columns, is-centered, is-vcentered, is-multiline, $isBig ? is-mobile">
-	{foreach $item->imagePost->images as $image}
-	{if $isBig}
-	<div class="column is-half">
-	{else}
-	<div class="column is-one-third-tablet is-one-third-desktop is-one-quarter-widescreen is-one-fifth-fullhd">
-	{/if}
-		<figure class="image">
-			<img width="{$image->imageWidth}" height="{$image->imageHeight}" src="{url_stream($image->imageURL->urlList[0])}" />
-		</figure>
+<section class="carousel" aria-label="carousel" Tabindex="0">
+  <div class="slides">
+		{foreach $item->imagePost->images as $i => $image}
+		<div class="slides-item" id="image-{$i + 1}" tabindex="0">
+			<img src="{url_stream($image->imageURL->urlList[0])}" />
 		</div>
 		{/foreach}
-</div>
+  </div>
+  <div class="carousel__nav">
+		{for $i = 0; $i < count($item->imagePost->images); $i++}
+		<a class="slider-nav" href="#image-{$i + 1}">{$i + 1}</a>
+		{/for}
+  </div>
+  <div class="carousel__skip-message" id="skip-link" tabindex="0"></div>
+</section>
 {/if}