Commit 79c728c4 authored by David Björkheim's avatar David Björkheim
Browse files

DEICH-5865 Deichman.no: Fix carousel for formidlingsskjerm

parent f0855019
......@@ -9,7 +9,7 @@ const Carousel = ({ children = [], showArrows, autoPlay, duration }) => {
const [currentSlide, setCurrentSlide] = useState(0);
// Generate slide array for carousel
const [springs, setSprings] = useSprings(children.length, i => ({
const [springs, api] = useSprings(children.length, i => ({
x: i * window.innerWidth,
scale: 1,
display: "block"
......@@ -37,7 +37,7 @@ const Carousel = ({ children = [], showArrows, autoPlay, duration }) => {
// Triggered on slide change
useEffect(
() => {
setSprings(slide => {
api.start(slide => {
// Hide slides except -1, current and +1
const isHidden = slide > currentSlide + 1 || slide < currentSlide - 1;
......@@ -87,7 +87,7 @@ const Carousel = ({ children = [], showArrows, autoPlay, duration }) => {
};
});
},
[currentSlide, setSprings]
[currentSlide, api]
);
const nextSlide = () => {
......@@ -121,7 +121,7 @@ const Carousel = ({ children = [], showArrows, autoPlay, duration }) => {
}
// Loop though springs and update positions
setSprings(i => {
api.set(i => {
// If slide is out of viewport, hide it!
if (i < currentSlide - 1 || i > currentSlide + 1) {
return { display: "none" };
......
......@@ -17,7 +17,7 @@ function TabPane({
const [markerStyle, setMarkerStyle] = useState({ left: 0, width: 0 });
const [scrollLeft, setScrollLeft] = useState(false);
const [scrollRight, setScrollRight] = useState(
process.browser && !IntersectionObserver
process.browser && !("IntersectionObserver" in window)
);
const tabRef = useRef(null);
const wrapper = useRef(null);
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment