summaryrefslogtreecommitdiff
path: root/animism-align/frontend/app/views/viewer/player/components.media/media.carousel.js
diff options
context:
space:
mode:
Diffstat (limited to 'animism-align/frontend/app/views/viewer/player/components.media/media.carousel.js')
-rw-r--r--animism-align/frontend/app/views/viewer/player/components.media/media.carousel.js20
1 files changed, 12 insertions, 8 deletions
diff --git a/animism-align/frontend/app/views/viewer/player/components.media/media.carousel.js b/animism-align/frontend/app/views/viewer/player/components.media/media.carousel.js
index bbfe520..46458b5 100644
--- a/animism-align/frontend/app/views/viewer/player/components.media/media.carousel.js
+++ b/animism-align/frontend/app/views/viewer/player/components.media/media.carousel.js
@@ -1,34 +1,38 @@
import React, { Component } from 'react'
-import { useKeenSlider } from "keen-slider/react"
+import { useKeenSlider } from "app/utils/vendor/keen-slider/react"
import "keen-slider/keen-slider.min.css"
import { MediaCitation } from './media.citation'
import { Arrow } from 'app/views/viewer/nav/viewer.icons'
+const SPACING = 15
+const SLIDES_PER_VIEW = 2
+
export const Carousel = ({ media }) => {
const { image_order, image_lookup, display_lookup, thumbnail_lookup, caption_lookup } = media.settings
+ // const [details, setDetails] = React.useState(null)
const [currentSlide, setCurrentSlide] = React.useState(0)
const [currentCaption, setCurrentCaption] = React.useState(caption_lookup[image_order[0]])
const [sliderRef, slider] = useKeenSlider({
- slidesPerView: 2,
- mode: "free-snap",
- spacing: 15,
+ slidesPerView: SLIDES_PER_VIEW,
+ mode: "free",
+ spacing: SPACING,
centered: true,
loop: false,
+ // duration: 700,
slideChanged: slider => {
const currentSlideIndex = slider.details().relativeSlide
const currentImageId = image_order[currentSlideIndex]
const currentCaption = caption_lookup[currentImageId]
setCurrentSlide(currentSlideIndex)
setCurrentCaption(currentCaption)
- }
+ },
})
- // console.log(display_lookup)
- // console.log(width)
+
return [
<div key={'carousel_' + media.id} ref={sliderRef} className='keen-slider carousel-items'>
- {image_order.map(id => {
+ {image_order.map((id, idx) => {
const image = display_lookup[id]
// console.log(image)
return (