From 45cf182c73a6eb019bf7e61cafa3ca117b014ddb Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Thu, 13 Aug 2020 20:15:08 +0200
Subject: gallery vs carousel

---
 .../player/components.utility/media.carousel.js    | 36 ++++++++++++++++++++++
 1 file changed, 36 insertions(+)
 create mode 100644 animism-align/frontend/app/views/viewer/player/components.utility/media.carousel.js

(limited to 'animism-align/frontend/app/views/viewer/player/components.utility/media.carousel.js')

diff --git a/animism-align/frontend/app/views/viewer/player/components.utility/media.carousel.js b/animism-align/frontend/app/views/viewer/player/components.utility/media.carousel.js
new file mode 100644
index 0000000..cfd1e48
--- /dev/null
+++ b/animism-align/frontend/app/views/viewer/player/components.utility/media.carousel.js
@@ -0,0 +1,36 @@
+import React, { Component } from 'react'
+import { useKeenSlider } from "keen-slider/react"
+import "keen-slider/keen-slider.min.css"
+
+export const Carousel = ({ media }) => {
+  const { image_order, image_lookup, display_lookup, thumbnail_lookup } = media.settings
+
+  const [sliderRef] = useKeenSlider({
+    slidesPerView: 2,
+    mode: "free-snap",
+    spacing: 15,
+    centered: true,
+    loop: false
+  });
+  // console.log(display_lookup)
+  // console.log(width)
+  return (
+    <div ref={sliderRef} className='keen-slider carousel-items'>
+      {image_order.map(id => {
+        const image = display_lookup[id]
+        console.log(image)
+        return (
+          <CarouselItem key={id} image={image} />
+        )
+      })}
+    </div>
+  )
+}
+
+const CarouselItem = ({ image }) => {
+  return (
+    <div className='keen-slider__slide carousel-item' style={{
+      backgroundImage: 'url(' + image.url + ')',
+    }} />
+  )
+}
-- 
cgit v1.2.3-70-g09d2