Borked auction view

src/lib/db_models.rb

@@ -381,7 +381,7 @@ class Image < EntityModel
 	def initialize(data)
 		super data
 		@auction_id = data["auction_id"]
-		@image_order = data["image_order"]
+		@image_order = data["image_order"].to_i
 		@url = data["url"]
 	end
 

src/public/js/slides.js

@@ -0,0 +1,31 @@
+let slideIdx = 0;
+showSlides(slideIdx);
+
+function nextSlide(offset) {
+	showSlides(slideIdx += offset)
+}
+
+function currentSlide(i) {
+	showSlides(slideIdx = i);
+}
+
+function showSlides(i) {
+	let ii;
+	let slides = document.getElementsByClassName("slide-container");
+	let dots = document.getElementsByClassName("dot");
+
+	console.log(slides);
+
+	if( i > slides.length - 1 ) { slideIdx = 0; }
+	if( i < 0 ) {slideIdx = slides.length - 1}
+
+	for( ii = 0; ii < slides.length; ii++ ) {
+		slides[ii].style.display = "none";
+	}
+	for( ii = 0; ii < dots.length; ii++ ) {
+		dots[ii].className = dots[ii].className.replace(" active", "");
+	}
+
+	slides[slideIdx].style.display = "block";  
+	dots[slideIdx].className += " active";
+}

src/views/auction/view.slim

@@ -1,9 +1,25 @@
-h1 = auction.title
-h2 = auction.description
+#auction-view
+  - if auction.images.length >= 1
+    .slideshow-container
+      - auction.images.each do |image|
+        .slide-container
+          .numbertext
+            a.prev onclick="nextSlide(-1)" = "<"
+            | #{image.image_order+1}/#{auction.images.length}
+            a.next onclick="nextSlide(1)" = ">"
+          img src="#{image.url}" 
 
-ul.list-container
-  - auction.categories.each do |category|
-      p = category.name
 
-- auction.images.each do |img|
-    img src="#{img.url}"
+    .slideshow-button-container
+      - auction.images.each do |image|
+          span.dot onclick="setSlide(#{image.image_order})"
+
+  #auctioninfo.card
+    h2 = auction.title
+
+  ul.list-container#category-list
+    - auction.categories.each do |category|
+        p = category.name
+
+
+  script src="/js/slides.js" type="text/javascript"

src/views/stylesheets/style.sass

@@ -445,6 +445,54 @@ ul.list-container
   display: flex
   flex-direction: column
 
+
+#auction-view
+  display: grid
+  grid-template-columns: 1fr 2fr
+  grid-template-rows: 1fr 1fr
+  grid-template-areas: "im in" "de in"
+
+#auctioninfo
+  grid-area: in
+
+  h2
+    font-size: 1.8rem
+
+.slideshow-container
+  grid-area: im
+  margin: auto
+  .slide-container
+    padding: 1rem
+    .numbertext
+      text-align: center
+    img
+      margin: 0 auto
+      height: 500px
+      width: auto
+      max-width: 500px
+      object-fit: cover
+
+  .prev, .next 
+    cursor: pointer
+    position: absolute
+    top: 50%
+    width: auto
+    padding: 1px 16px
+    margin-top: -22px
+    color: $fg_clr
+    font-weight: bold
+    font-size: 18px
+    transition: 0.6s ease
+    border-radius: 0 3px 3px 0
+    user-select: none
+
+  .next 
+    right: 0
+    border-radius: 3px 0 0 3px
+
+  .prev:hover, .next:hover 
+    background-color: #0022
+
 // Animation keyframes
 @keyframes fade-in
   0%