diff options
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.js | 20 |
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 ( |
