blob: cfd1e4878a813922e3ffb18c62390ca3ac6cb99d (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
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 + ')',
}} />
)
}
|
