[Help]: Loop working with 4+ images?

[p-mylecharane]

Summary

Hey all.

I’m trying to get loop working for 4 images but cannot work out how. Basically I have a carousel with 3 images showing and I’d like it to loop even if I have just four images. Is this possible? My basic setup below (any help would be appreciated):

import React, { useEffect } from 'react'
import {
  PrevButton,
  NextButton,
  usePrevNextButtons
} from '@/components/CarouselButtons'
import useEmblaCarousel from 'embla-carousel-react'

export function EmblaCarousel({ images }) {
  useEmblaCarousel.globalOptions = { loop: true }
  const [emblaRef, emblaApi] = useEmblaCarousel({ 
    align: 'start',
    slidesToShow: 3,
    slidesToScroll: 1
  })

  const {
    prevBtnDisabled,
    nextBtnDisabled,
    onPrevButtonClick,
    onNextButtonClick
  } = usePrevNextButtons(emblaApi)

  useEffect(() => {
    if (emblaApi) {
      console.log(emblaApi.slideNodes()) // Access API
    }
  }, [emblaApi])

  return (
    <>
      <div className="product-images embla" ref={emblaRef}>
        <div className="embla__container">
          {images.map((image, index) => (
            <figure
              key={index}
              style={{
                cursor: 'pointer',
              }}
            >
              <img
                src={image.url}
                alt={`Image ${index + 1}`}
                className="img"
              />
            </figure>
          ))}
        </div>
      </div>
      <div className="embla__controls">
        <div className="embla__buttons">
          <PrevButton onClick={onPrevButtonClick} disabled={prevBtnDisabled} />
          <NextButton onClick={onNextButtonClick} disabled={nextBtnDisabled} />
        </div>
      </div>
    </>
    
  )
}

I’m passing images to the carousel from my page, and have the following scss setup:

.embla {
  overflow-x: hidden;
  position: relative;
  &:hover {
    + .embla__controls {
      opacity: 1 !important;
    }
  }
  &__controls {
    position: absolute;
    top: 19em;
    z-index: 10;
    width: calc(100% - 1em);
    transition: opacity 0.5s ease-in-out;
    opacity: 0;
    &:hover {
      opacity: 1;
    }
    @media screen and (max-width: 670px) {
     display: none;
    }
  }
  &__buttons {
    mix-blend-mode: difference;
    display: flex;
    justify-content: space-between;
    @media screen and (max-width: 670px) {
      display: none;
     }
    button {
      color: white;
      &:hover {
        cursor: pointer;
        color: white !important;
      }
    }
  }
  &__container {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 33.333%;
    @media screen and (max-width: 670px) {
      grid-auto-columns: 100%;
    }
  }
}

If applicable, which variants of Embla Carousel are relevant to this question?

• embla-carousel (Core)
• embla-carousel-react
• embla-carousel-vue
• embla-carousel-svelte
• embla-carousel-autoplay
• embla-carousel-auto-scroll
• embla-carousel-solid
• embla-carousel-auto-height
• embla-carousel-class-names
• embla-carousel-docs (Documentation)
• embla-carousel-docs (Generator)

Additional information

No response

CodeSandbox example

No response

[p-mylecharane]

Ok so i did a bit of digging and ended up writing a solution if it helps anyone in the future here. It basically checks to see if there are enough images to loop, and if not, it will make duplicates and add them back into the mix. See below:

import React, { useEffect, useState } from 'react'
import {
  PrevButton,
  NextButton,
  usePrevNextButtons
} from '@/components/CarouselButtons'
import useEmblaCarousel from 'embla-carousel-react'

export function EmblaCarousel({ images }) {
  // State to hold the extended image list with duplicates
  const [extendedImages, setExtendedImages] = useState(images)

  const [emblaRef, emblaApi] = useEmblaCarousel({
    loop: true,
    align: 'start',
    slidesToShow: 3,
    slidesToScroll: 1
  })

  const {
    prevBtnDisabled,
    nextBtnDisabled,
    onPrevButtonClick,
    onNextButtonClick
  } = usePrevNextButtons(emblaApi)

  useEffect(() => {
    if (emblaApi) {
      console.log(emblaApi.slideNodes()) // Access API

      // Check if there are enough slides to loop
      const notEnoughToLoop = !emblaApi.internalEngine().slideLooper.canLoop()
      if (notEnoughToLoop) {
        const duplicatesNeeded = 1

        // Create duplicates with unique keys
        const duplicates = []
        for (let i = 0; i < duplicatesNeeded; i++) {
          duplicates.push(...images.map((image, index) => ({
            ...image,
            duplicateKey: `${index}-duplicate-${i}`
          })))
        }

        // Combine original and duplicates
        setExtendedImages((prevImages) => [...prevImages, ...duplicates])
        emblaApi.reInit()
      }
    }
  }, [emblaApi, images])

  return (
    <>
      <div className="product-images embla" ref={emblaRef}>
        <div className="embla__container">
          {extendedImages.map((image, index) => (
            <figure
              key={image.duplicateKey ? image.duplicateKey : index}
              style={{
                cursor: 'pointer',
              }}
            >
              <img
                src={image.url}
                alt={`Image ${index + 1}`}
                className="img loaded"
              />
            </figure>
          ))}
        </div>
      </div>
      <div className="embla__controls">
        <div className="embla__buttons">
          <PrevButton onClick={onPrevButtonClick} disabled={prevBtnDisabled} />
          <NextButton onClick={onNextButtonClick} disabled={nextBtnDisabled} />
        </div>
      </div>
    </>
  )
}