Merge pull request #443 from greenpeace/planet-5728

PLANET-5728: Carousel Gallery: Slider not working
greenpeace · Nov 26, 2020 · 38c764a · 38c764a
2 parents 07f7aa5 + 09442a4
commit 38c764a
Showing 1 changed file with 4 additions and 12 deletions.
diff --git a/assets/src/blocks/Gallery/GalleryCarousel.js b/assets/src/blocks/Gallery/GalleryCarousel.js
@@ -1,5 +1,4 @@
 import { useState, useEffect, useRef } from '@wordpress/element';
-import _uniqueId from 'lodash/uniqueId';
 
 const { __ } = wp.i18n;
 
@@ -24,8 +23,8 @@ export const GalleryCarousel = ({ images }) => {
   }
 
   const goToSlide = newSlide => {
-    const nextElement = document.getElementById(`${idRef.current}-slide${newSlide}`);
-    const activeElement = document.getElementById(`${idRef.current}-slide${currentSlide}`);
+    const nextElement = slidesRef.current[newSlide];
+    const activeElement = slidesRef.current[currentSlide];
     if (newSlide !== currentSlide && nextElement && activeElement && !sliding) {
       setSliding(true);
       const order = getOrder(newSlide);
@@ -53,7 +52,7 @@ export const GalleryCarousel = ({ images }) => {
   const goToPrevSlide = () => goToSlide(currentSlide === 0 ? lastSlide : currentSlide - 1);
 
   const timerRef = useRef(null);
-  const idRef = useRef(null);
+  const slidesRef = useRef([]);
 
   // Set up the autoplay for the slides
   useEffect(() => {
@@ -66,13 +65,6 @@ export const GalleryCarousel = ({ images }) => {
     }
   }, [currentSlide, images]);
 
-  // Set up the unique id for the carousel
-  useEffect(() => {
-    if (!idRef.current) {
-      idRef.current = `gallery-${_uniqueId()}`;
-    }
-  }, []);
-
   return (
     <div className="carousel slide">
       {images.length > 1 &&
@@ -97,7 +89,7 @@ export const GalleryCarousel = ({ images }) => {
           <div
             key={image.image_src}
             className={`carousel-item ${index === currentSlide ? 'active' : ''}`}
-            id={`${idRef.current}-slide${index}`}
+            ref={element => slidesRef.current[index] = element}
           >
             <img
               src={image.image_src}