Add generic slider Alpine component

internal/view/static/js/alpine-components/generic-slider.js

@@ -0,0 +1,18 @@
+export const genericSlider = {
+  name: 'genericSlider',
+  fn: (slidesQty = 0) => ({
+    currentSlide: slidesQty > 0 ? 1 : 0,
+    get hasNextSlide () {
+      return this.currentSlide < slidesQty
+    },
+    get hasPrevSlide () {
+      return this.currentSlide > 1
+    },
+    nextSlide () {
+      if (this.hasNextSlide) this.currentSlide++
+    },
+    prevSlide () {
+      if (this.hasPrevSlide) this.currentSlide--
+    }
+  })
+}

internal/view/static/js/init-alpine-components.js

@@ -1,11 +1,13 @@
 import { changeThemeButton } from './alpine-components/change-theme-button.js'
 import { githubStars } from './alpine-components/github-stars.js'
 import { dashboardAsideItem } from './alpine-components/dashboard-aside-item.js'
+import { genericSlider } from './alpine-components/generic-slider.js'
 
 export function initAlpineComponents () {
   document.addEventListener('alpine:init', () => {
     Alpine.data(changeThemeButton.name, changeThemeButton.fn)
     Alpine.data(githubStars.name, githubStars.fn)
     Alpine.data(dashboardAsideItem.name, dashboardAsideItem.fn)
+    Alpine.data(genericSlider.name, genericSlider.fn)
   })
 }