From d2887597d103f492ef4c31b0dc7053dd40fafce3 Mon Sep 17 00:00:00 2001
From: 0xFEEDC0DE64 <daniel@brunner.ninja>
Date: Sun, 7 Mar 2021 10:19:02 +0100
Subject: [PATCH] Implemented basic endless scroll carousel slide show

---
 api.php   |  4 ++++
 index.php | 57 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 script.js | 54 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 115 insertions(+)
 create mode 100644 api.php
 create mode 100644 index.php
 create mode 100644 script.js
diff --git a/api.php b/api.php
new file mode 100644
index 0000000..80b6e95
--- /dev/null
+++ b/api.php
@@ -0,0 +1,4 @@
+<?php
+$files = glob('img/*.{jpg,jpeg,png,gif}', GLOB_BRACE);
+$selected = $files[random_int(0, count($files)-1)];
+echo $selected;
diff --git a/index.php b/index.php
new file mode 100644
index 0000000..ba6fd4d
--- /dev/null
+++ b/index.php
@@ -0,0 +1,57 @@
+<?php
+$files = glob('img/*.{jpg,jpeg,png,gif}', GLOB_BRACE);
+$selected = $files[random_int(0, count($files)-1)];
+?>
+<!doctype html>
+<html lang="en">
+    <head>
+        <!-- Required meta tags -->
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+        <!-- Bootstrap CSS -->
+        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous" />
+
+        <title>Hello, world!</title>
+
+        <style>
+            html, body, #mainContainer, #mainCarousel, .carousel-inner, .carousel-item {
+                height: 100%;
+            }
+
+            .carousel-item img {
+                max-width: 100%;
+                max-height: 100%;
+            }
+
+            body {
+                background-color: #222;
+            }
+
+            .carousel-inner {
+                text-align: center;
+            }
+        </style>
+    </head>
+    <body >
+        <div class="container" id="mainContainer">
+            <div id="mainCarousel" class="carousel slide" data-bs-ride="carousel">
+                <div class="carousel-inner">
+                    <div class="carousel-item active"><img src="<?php echo $selected; ?>" /></div>
+                </div>
+                <button class="carousel-control-prev" type="button" data-bs-target="#mainCarousel" data-bs-slide="prev">
+                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+                    <span class="visually-hidden">Previous</span>
+                </button>
+                <button class="carousel-control-next" type="button" data-bs-target="#mainCarousel" data-bs-slide="next">
+                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
+                    <span class="visually-hidden">Next</span>
+                </button>
+            </div>
+        </div>
+
+        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
+        <script src="script.js"></script>
+    </body>
+</html>
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..e1b6c54
--- /dev/null
+++ b/script.js
@@ -0,0 +1,54 @@
+jQuery(document).ready(function($){
+    $('#mainCarousel').on('slide.bs.carousel', function (e) {
+        console.log(e.to);
+        if (e.to == 0) {
+            $('#mainCarousel .carousel-inner .carousel-item:last')
+                .remove();
+            $.get('api.php', function(data) {
+                $('#mainCarousel .carousel-inner')
+                    .prepend(
+                        $('<div>')
+                            .addClass('carousel-item')
+                            .append($('<img />')
+                                .attr('src', data)
+                            )
+                    );
+            });
+        } else if (e.to == 2) {
+            $('#mainCarousel .carousel-inner .carousel-item:first')
+                .remove();
+            $.get('api.php', function(data) {
+                $('#mainCarousel .carousel-inner')
+                    .append(
+                        $('<div>')
+                            .addClass('carousel-item')
+                            .append($('<img />')
+                                .attr('src', data)
+                            )
+                    );
+            });
+        }
+    });
+
+    $.get('api.php', function(data) {
+        $('#mainCarousel .carousel-inner')
+            .prepend(
+                $('<div>')
+                    .addClass('carousel-item')
+                    .append($('<img />')
+                        .attr('src', data)
+                    )
+            );
+    });
+
+    $.get('api.php', function(data) {
+        $('#mainCarousel .carousel-inner')
+            .append(
+                $('<div>')
+                    .addClass('carousel-item')
+                    .append($('<img />')
+                        .attr('src', data)
+                    )
+            );
+    });
+})
